目录

• Axios介绍
• Axios安装
• Axios二次封装

1. Axios介绍

什么是 axios？

• Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

• 从浏览器中创建 XMLHttpRequests（和原生的Ajax相同都是基于XMLHttpRequest（）对象的二次封装）
• 从 node.js 创建 http 请求（可以在Node环境中配合Express()使用实现异步的数据交互）
• 支持 Promise API（Axios是基于Promise()对象进行的二次封装，完美支持Promise()对象的所有Api是让异步的数据交互变得更加简单，方便）
• 拦截请求和响应（提供自定以拦截器可以自行对Axios进行二次封装，满足不同开发者不同情境下的定制化需求）
• 转换请求数据和响应数据（相比fetch（）axios最强大的就是自己完成了请求和相应数据之间的转换，大大减少开发者的工作量）
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

2.Axios安装

• 安装 npm install axios --save
• 引入 import Axios from './axios'
• 使用 Vue.prototype.axios = Axios;（全局注册 在使用时可以使用this.$axios使用）
• 建议：在使用过程中建议大家创建一个axios的文件夹如图：
  
  好处：
• apiConfig文件中主要用来存放后台接口的地址,可分为研发地址,测试地址,生产地址,易于区分
• index文件中我们可以用来对axios进行二次封装

3.Axios二次封装

这是官网对Axios拦截器的介绍当然是写的非常的泛泛，下面我会给大家详细解读

• 首先在index.js文件中引入import axios from "axios"
• 1.请求头封装
  利用axios.create()方法可以自定义axios的配置,包括延时,相应的参数格式,以及携带请求头的格式

const Axios = axios.create({
    timeout: 20000,
    responseType: "json",
    headers: {
      'Content-Type': 'application/json',
    }
});

• 2.请求拦截器的封装
  请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

Axios.interceptors.request.use(
    config => {
      let userInfo = store.state.permissions.userInfo;//用来获取本地存储的accessToken数据
      if (userInfo.accessToken) {
        config.headers['Authorization'] = userInfo.accessToken;//设置请求头
      }
      if (config.mask !== false) {//设置请求等待过程的页面动画,使用ElementUI中的loading动画
        loadAll = Loading.service({
          lock: true,
          text: '加载中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.4)'
        });
      }
      return config;
    },
    err => {
      return Promise.reject(err);
    });

• 3.相应拦截器的封装
  响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

Axios.interceptors.response.use(
    response => {
      setTimeout(function () {
        loadAll.close();
      }, 500);
    //   返回成功的回调函数
      if (response.data.code === 200) {
        //操作成功返回数据
        return response.data;
      }
    },
    // 返回错误的回调函数
    error => {
      Message({
        showClose: true,
        message: '请求失败，请重试',
        type: 'error'
      });
      setTimeout(function () {
        loadAll.close();
      }, 500);
    //   过滤返回的错误码,根据不同的错误码执行不同的函数
      if (error.response) {
        switch (error.response.status) {
          case 401:
            store.commit('permissions/removeInfo');//清除用户数据,跳转重新登录页面
            break;
          case 404:
            break;
          case 403:
            break;
          case 500:
            break;
          default:
            break;
        }
        return Promise.reject(error)
      }
    }
  );