axios封装拦截器

axios 封装拦截器

#参考文章：

TypeScript 封装 axios——Vue3+Ts 实践：https://zhuanlan.zhihu.com/p/452946486?utm_id=0

axios 请求及响应拦截理解：https://www.cnblogs.com/caijinghong/p/14120244.html)https://www.cnblogs.com/caijinghong/p/14120244.html?ivk_sa=1024320u

一，为什么要封装

项目中会有很多的模块都需要发送网络请求，导致每个模块对 axios 依赖性太强，即每个模块都和一个第三方库耦合度较高
在我们发送网络请求的时候，往往会有很多共同的特性，比如在请求头中添加 token，展示一个 loading

二，拦截器简介

拦截器主要分为两种，请求拦截器和响应拦截器。

请求拦截器：请求发送之前进行拦截，应用于我们在请求发送前需要对请求数据做一些处理。例如： - 携带 token - 当请求时间过长时，设置 loading

响应拦截器：在响应到达时进行拦截，应用于在我们业务代码中拿到数据之前，需要对数据做一定处理。例如： - 转换数据格式 - 移除 loading

三，基本使用

1，基础配置

import axios from 'axios' // 引入axios模块

// 构建axios实例
const instance = axios.create({
  baseURL: process.env.BASE_API, // 该处url会根据开发环境进行变化（开发/发布）
  timeout: 10000, // 设置请求超时连接时间
})

2，request 拦截器（请求发送后端之前）

request 拦截器并不像他的名字一样，进行拦截，发送不出去，而是对请求的数据进行处理，再发送请求。

就如游客访问的时候，因为没有 token 拦截器只会判断 post 请求头携不带 token，并不是请求没有发送出去。

config 用于配置信息设置，error 用于显示错误信息。

instance.interceptors.request.use(
  (config) => {
    console.log(config) // 该处可以将config打印出来看一下，该部分将发送给后端（server端）
    config.headers.token = '该处可设置token内容'
    return config // 对config处理完后返回，下一步将向后端发送请求
  },
  (error) => {
    // 当发生错误时，执行该部分代码
    console.log(error) //调试用
    return Promise.reject(error)
  }
)

3，response 拦截器（数据返回后，具体页面加载之前）

响应拦截器，就是对返回的数据进行处理。数据返回页面前的行为

instance.interceptors.response.use(
    response => {  // 该处为后端返回整个内容
        const res = response.data;  // 该处可将后端数据取出，提前做一个处理
        if ('正常情况') {
            return response  // 该处将结果返回，下一步可用于前端页面渲染用
        } else {
            alert('该处异常');
            return Promise.reject('error')
        }
    },
    error => {
        console.log(error),
        return Promise.reject(error)
    }
)

4，将 axios 实例导出，方便其他页面调用

1	export default instance

5，其他页面调用上述实例发送请求

import instance from '../xxx.js' // 将实例导入
const qs = require('qs') // 用于处理前端发送数据格式
const base = process.env.BASE_URL // 该处根据开发环境变化

export const login = (params) => {
  return instance
    .post(`${base}/login`, qs.stringify(params))
    .then((res) => res.data)
} // 该处即可实现向后端发送请求，并将数据返回给调用该接口的位置