axios封装使用

首先把需要的接口名放在一个api.js中、

然后再在http文件夹下的index.js中初始化配置

import axios from 'axios'
const $axios = axios.create({
baseURL:'/api'，
timeout:3000
})

在main.js中引入请求和接口地址

import $axios from './http'
import $api from './assets/js/api'
Vue.prototype.$api = $api;
Vue.prototype.$axios = $axios;



new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

创建store文件夹封装vuex
在main.js中引入store

在action…js中异步获取内容

import $axios from '../http'
import $api from '../assets/js/api'
export default{
menuAsyncAdd(context){
return new Promise((resolve,reject)=>{
//promise中异步获取菜单内容
$axios.get($api.menulistUrl,{
params:{
istree:1
}
}).then(res=>{
//异步请求成功 把结果返回出去
resolve(res)
})
})}
}

在需要的vue中调用方法

             this.menuAsyncAdd().then((res) => {
                  console.log(res.data.list, "123");
                  this.menus = res.data.list;
                });

              }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });

在config文件夹下配置跨域代理