Vue方向：axios的配置使用、instance实例对象的创建、以及axios的封装处理

axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定：

在mian.js中引用axios，并邦到原型链上。使用插件的时候，一般要在入口文件main.js中引入，由于mian.js是项目第一运行的文件：

用法：

https://upload-images.jianshu.io/upload_images/12797094-9a922facbfa3aab0.png?imageMogr2/auto-orient/strip|imageView2/2/format/webp

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