封装axios:axios 多次发送请求就会获取到之前发送的结果，导致获取参数错误

在封装axios时，调用接口，接口请求成功了，但是发送第n次，就会有n个拦截器工作：

排查得到：我讲拦截器设置定义在了封装的request方法中，这样闭包会导致多次请求，将上一次的结果储存下来，调5次，就会调用5次拦截器。应该将拦截器设置在外面。

错误：

这样请求5次，就会打印5次res

正确：

简单封装 axois的demo

import { message } from "antd";
import axios, { AxiosRequestConfig } from "axios";

const handleNetworkError = (errStatus) => {
  let errMessage = "未知错误";
  if (errStatus) {
    switch (errStatus) {
      case 400:
        errMessage = "错误的请求";
        break;
      case 401:
        errMessage = "未授权，请重新登录";
        break;
      case 403:
        errMessage = "拒绝访问";
        break;
      case 404:
        errMessage = "请求错误,未找到该资源";
        break;
      case 405:
        errMessage = "请求方法未允许";
        break;
      case 408:
        errMessage = "请求超时";
        break;
      case 500:
        errMessage = "服务器端出错";
        break;
      case 501:
        errMessage = "网络未实现";
        break;
      case 502:
        errMessage = "网络错误";
        break;
      case 503:
        errMessage = "服务不可用";
        break;
      case 504:
        errMessage = "网络超时";
        break;
      case 505:
        errMessage = "http版本不支持该请求";
        break;
      default:
        errMessage = `其他连接错误 --${errStatus}`;
    }
  } else {
    errMessage = `无法连接到服务器！`;
  }

  message.error(errMessage);
};
axios.interceptors.response.use(
  (res) => {
    console.log('res', res);

    return Promise.resolve(res.data)
  },
  (err) => {
    handleNetworkError(err.response?.status);
    return Promise.resolve(err.response);
  }
);

axios.interceptors.request.use(
  (c) => {
    // 每次请求时会从localStorage中获取token
    let token = localStorage.getItem("token");
    if (token) {
      // 把token加入到默认请求参数中
      c.headers.common['token'] = token;
    }
    return c;
  },
  (err) => Promise.reject(err)
);


const request = (config?: AxiosRequestConfig): any => {
  const BSAE_URL = "http://localhost:8800";

  return axios({
    baseURL: BSAE_URL,
    timeout: 1000,
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    ...config,
  }).then((res) => res);
};

export default request;