axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定：
在mian.js中引用axios，并邦到原型链上。使用插件的时候，一般要在入口文件main.js中引入，因为mian.js是项目首先运行的文件：
用法：
vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装：
在mian.js中引用axios，vue-axios，通过全局方法 Vue.use() 使用插件，就相当于调用install方法：
使用方法
新建一个utils文件夹下的index.js的文件
// 这个时axios的配置
import axios from 'axios';
// import { config } from 'vue/types/umd';
axios.defaults.baseURL = 'http://127.0.0.1:3000';
// 错误信息处理
const errorHandle = (status, other) => {
switch (status) {
case 400:
console.log('信息验证失败');
break;
case 401:
console.log('认证失败');
break;
case 403:
localStorage.removeItem("token");
console.log('token校验失败');
break;
case 404:
console.log('请求资源不存在');
break;
default :
console.log(other);
break;
}
}
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// console.log(config);
if(localStorage.elementToken){
config.headers.Authorization=localStorage.elementToken;
}
console.log(config);
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
// console.log();
// console.log(response.data.token);
// response.headers['Authorization'] = response.data.token;
return response.status=== 200 ? Promise.resolve(response): Promise.reject(response);
}, function (error) {
// 对响应错误做点什么
const {response}=error;
if(response){
errorHandle(response.status,response.data.message)
return Promise.reject(response.data);
}else{
console.log('断了');
}
});
export default axios;
在main.js中放置
importaxiosfrom'axios'
importVueAxiosfrom'vue-axios'
Vue.use(VueAxios,axios);
创建一个新文件夹API下的文件api.js
importaxiosfrom'@/utils/index';
// 获取列表
exportfunctiongetLoginApi(data){
returnaxios.post('/login',data)
//返回的时promies对象，所以直接return出去就好了
}
在vue文件中使用他
import {getLoginApi, getOrdergressApi } from '@/API/api'
async doLogin1(){
let a=await getOrdergressApi().catch((a)=>{
console.log(a);
});
console.log(a);
}
链接：https://www.jianshu.com/p/79a9af41eeca
