1-12 axios拦截器

Axios拦截器

讨论Axios拦截器之前，插入一个比较方便的功能介绍，如下：

import Axios from "axios"
import qs from "qs"

//参数设置（此处为获取当前浏览器的链接，然后进行接口拼接，这样无论是本地代理，还是线上测试。都不用频繁的修改 Axios.defaults.baseURL）因为可以直接获取。
const host = window.location.host;
const protocol = window.location.protocol
const localUrl = protocol + "//" +  host;
const siteAPIBmPath = localUrl + "/jhj-train-oa/";

Vue.prototype.$axios = Axios

//这是指定接口访问的前缀路径
Axios.defaults.baseURL = siteAPIBmPath;
//下面为转化方法格式的，正常的请求，都是要加header的。
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

 

这是两个统一的全局设置，写在main.js里面。设置好之后，我们请求的url只需要写不同的接口地址就可以了。这样写的方便之处在于，一个项目的接口，肯定都是来源于一个服务器，相同的部分，我们只需要定义好了。就不用每次写一接口的时候，就把服务器域名也加上了，只需要填写地址就可以正常的进行访问了。

———————————————————————————————————————————————————————
下面来讲axios拦截器，拦截器是axios最常用的一个点，它主要的作用是在请求或响应被then或catch处理前拦截它们。
主要分为两种：
1.请求拦截：

// 添加请求拦截器
Axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

2.响应拦截：

// 添加响应拦截器
Axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

拦截器通常写在main.js里面。可以通过打印查看，他的执行顺序，这个需要大家自己测试。只要在拦截器里面打印config或者error就可以了。
举个例子，拦截器的应用，可以用在Axios 的post请求，上篇文章，我重点的提到了。Axios 的post请求是接收的参数是from-data类型，访问前，是需要处理一下的（如不理解，可查看我的上篇文章 axios post 请求），这个我们就可以在拦截器里面做这个统一处理，如下：

//引入qs第三方库
import qs from "qs"

//在请求拦截器里面，进行判断

Axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    if(config.method == "post"){//如果当前接口为post请求需要转换参数
      console.log(config)
      config.data = qs.stringify(config.data)
    }

    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

这样，我们post请求，就只需要正常的写参数就可以了。不用每个接口都调用一次 qs.stringify()这个方法了。为我们节省了很多的代码空间。希望大家灵活运用。快速掌握。