vue2 axios封装 请求拦截器和响应拦截器

前言知识

需要先安装好axios库，并掌握vue2使用axios发送post和get请求(含跨域解决

什么是拦截器

相当于后端的中间件，都是用来对http请求做一些请求和响应处理的
以thinkphp举例，vue2中的请求拦截器和响应拦截器类似于tp的前置中间件和后置中间件，

为什么要创建拦截器

因为默认vue2使用axios发起ajax请求后，响应回来的数据不仅包含api数据，还掺杂了vue本身的一些配置项数据因为默认vue2使用axios发起ajax请求后，响应回来的数据不仅包含api数据，还掺杂了vue本身的一些配置项数据

例如：

实际图中data对象的数据才是服务端响应回来的数据，其余配置项用不到，为了更细致干净的获取数据，响应拦截器便应运而生
对于请求拦截器来说，可能要配合后端实现jwt验证，前端需要自定义响应头并携带数据，请求拦截器便可以作用于该场景

怎么使用

src目录下创建axios实例对象文件

需要先创建一个总的包含所有请求的文件夹，前端开发一般以api或者request，这里以api为例
在api文件夹下，创建一个示例axios对象文件，这里叫request.js

request.js文件中干四件事

1. 导入axios对象
2. 创建axios新的实例对象，传入配置项，并取名，这里名字以instance为例
3. 为instance实例对象添加 请求拦截器和响应拦截器，对http请求做数据处理
4. export default暴露出去，供外部调用

axios配置项可以移步 axios官网 请求配置章节 查看

关于baseURL说明

在axios中配置了baseURL地址情况下，会直接请求baseURL配置的地址，而不会走入本地node服务器的8000端口
也就是说配置了baseURL的情况下，是无法使用本地node服务器进行代替与后端服务器进行通信避免跨域问题的
只有当baseURL没配置的情况下，且配置了vue.config.js，本地node服务器才会进行代理并于后端服务器进行通信获取数据
真实的前端项目开发中，baseURL是一定要配置的，但vue打包部署上线后，又丢失了本地的node服务器(不会把node服务器进行打包上传)，也就天然无法通过配置vue.config.js进行来避免跨域问题了
总之：
本地开发环境下，vue可以通过配置vue.config.js使用本地node服务器来解决跨域问题
部署上线后，vue已经被编译成不包含node服务器的html、css、js等静态资源，无法再通过node服务器通信，只能后端允许响应头才能解决跨域问题

// 导入axios
import axios from 'axios'

// 创建一个axios实例对象，取名为instance
const instance = axios.create({
    // 后端api所处域名
    baseURL: 'http://abc.yongheng.work',
    // 指定请求超时的毫秒数。
    timeout: 5000,
    // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'；浏览器专属：'blob'
    responseType: 'json', // 默认值
});

// 为instance对象添加请求拦截器，每个请求都会优先来到此处被拦截做处理后，再发起http请求
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 为instance对象添加响应拦截器，每个响应都会优先来到此处被拦截做处理后，再返回http响应数据
instance.interceptors.response.use(function (response) {
    // http响应码为200时，细致地抽取出服务端返回的api数据
    if (200 == response.status) {
        return response.data;
    }
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
});

//  把instance对象暴露出去，供外部使用； 使用default导出整个js文件对象
export default instance

使用

<template>
  <div>
    <button @click="startRequest">点我发起ajax请求</button>
  </div>
</template>

<script>
// 导入刚刚配置了请求拦截器和响应拦截器的对象
import axios from "./api/request.js";
export default {
  methods: {
    startRequest() {
      axios
        .post("/api/Test/index")
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

点击发送后，可以看到，拿到了干净的服务端响应数据

其他例子补充

这里只是以一个axios对象举例，真实的企业开发中，一个vue文件对于一个axios的js文件(需要自己创建)
具体可以查看该链接以下小节
vue2请求拦截器+响应拦截器+接口的封装抽取
3、接口请求放在api.js，注意看自己的接口传参 要不要 { }
4、在要使用的页面直接引入，以login.vue为例
来实现一个vue文件调用一个js文件中的方法，然后发起该vue文件对应的ajax请求