后台管理系统[02.3种拦截器的封装]

QNRequest的参数增加拦截器，并封装

1 在request文件的index.ts创建class QNRequest

2 在 创建实例对象

3 用这个实例对象发送request

拦截器一：添加全局的拦截器（所有的实例都会有）

 // 1 添加所有的实例都有的拦截器（全局）
    this.instance.interceptors.request.use(
      (config) => {
        console.log('所有实例请求成功')
        return config
      },
      (err) => {
        console.log('请求失败')
        return err
      }
    )

    this.instance.interceptors.response.use(
      (res) => {
        console.log('所有实例响应成功')
        return res
      },
      (err) => {
        return err
      }
    )

拦截器二：针对这个实例添加拦截器

//2 从config中取出的拦截器是对应的实例的拦截器
    // 别人传进来什么拦截，就应用什么拦截requestInterceptorCatch
    this.instance.interceptors.request.use(this.interceptors?.requestInterceptor, this.interceptors?.requestInterceptorCatch)
    this.instance.interceptors.response.use(this.interceptors?.responseInterceptor, this.interceptors?.responseInterceptorCatch)

拦截器三：某个请求有单独的拦截（较少用）

  // 封装request函数
  request(config: QNRequestConfig): void {
    // 3 单个请求对应的拦截
    // config.interceptors?有没有requestInterceptor函数
    if (config.interceptors?.requestInterceptor) {
      // 如果有这个函数，就把这个函数执行 并返回config
      config = config.interceptors.requestInterceptor(config)
    }

    this.instance.request(config).then((res) => {
      if (config.interceptors?.responseInterceptor) {
        res = config.interceptors.responseInterceptor(res)
      }
    })
  }

main.ts中

// 该实例有自己的拦截,实例拦截和全局的拦截
qnRequest.request({
  method: 'GET',
  url: '/home/multidata',
  interceptors: {
    requestInterceptor: (config) => {
      // 修改config的操作
      console.log('单独请求的config')
      return config
    },
    responseInterceptor: (res) => {
      console.log('单独响应的response')
      return res
    }
  }

})

// 只有实例拦截和全局的拦截
qnRequest.request({
  method: 'GET',
  url: '/home/multidata',
})