Vue2中使用axios的3种方法实例总结

<template>
  <div>{{data}}</div>
</template>
 
<script>
/* 第一步下载 axios 命令：npm i axios 或者yarn add axios 或者pnpm i axios */
/* 第二步引入axios */
import axios from 'axios'
export default {
  data() {
    return {
        data:""
    };
  },
  methods: {
      /* 第三步 写一个name事件  */
    name() {
      axios({
        method: "get",
        url: "http://yufei.shop:3000/tabbar",
      }).then(res=>{
          this.data = res.data /* 将拿到的值，赋值给data */
      })
    },
  },
  /* 第四步 在create钩子函数中 将name事件在页面出现的时候执行 */
  created() {
    this.name();
  },
};
</script>
 

// 引入 axios
import axios from 'axios'
 
// 挂载一个自定义属性$http
Vue.prototype.$http = axios
// 全局配置axios请求根路径(axios.默认配置.请求根路径)
axios.defaults.baseURL = 'http://yufei.shop:3000'

<template>
  <div>{{ data }}</div>
</template>
 
<script>
export default {
  data() {
    return {
        data:""
    };
  },
  methods:{
     async name() {  //async  await  是解决异步的一种方案，必须要加，但是原生封装就不用
          const {data:res} = await this.$http.get('/tabbar')
          this.data = res
      }
  },
  created(){
      this.name()
  }
};
</script>

// 引入 axios
import axios from 'axios'
// 封装 baseURL
const request = axios.create({
    baseURL:"http://yufei.shop:3000"
})
// 向外暴露 request
export default request;

<template>
  <div>{{ data }}</div>
</template>
 
<script>
// 1. 导入request
import request from '@/APi/request.js'
export default {
  data() {
    return {
        data:""
    };
  },
 
  methods:{
    //    事件name
     async name() {
         const res = await request.get('/tabbar')
         this.data  = res.data
      }
  },
//   生命周期函数created中调用 事件name 
  created(){
      this.name()
  }
};
</script>