Vue3+TS+Pinia+Store+Axios问题汇总

Axios

axios的最新封装，解决类型AxiosRequestConfig不能赋值给InternalAxiosReqe

报错内容：

类型“(config: AxiosRequestConfig) => AxiosRequestConfig”的参数不能赋给类型“AxiosInterceptorFulfilled<InternalAxiosRequestConfig>”的参数。 不能将类型“AxiosRequestConfig”分配给类型“InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>”。 不能将类型“AxiosRequestConfig”分配给类型“InternalAxiosRequestConfig”。 属性“headers”的类型不兼容。 不能将类型“AxiosHeaders | (Partial<RawAxiosHeaders & { Accept: AxiosHeaderValue; "Content-Length": AxiosHeaderValue; "User-Agent": AxiosHeaderValue; "Content-Encoding": AxiosHeaderValue; Authorization: AxiosHeaderValue; } & { ...; }> & Partial<...>) | undefined”分配给类型“AxiosRequestHeaders”。 不能将类型“undefined”分配给类型“AxiosRequestHeaders”。 不能将类型“undefined”分配给类型“Partial<RawAxiosHeaders & { Accept: AxiosHeaderValue; "Content-Length": AxiosHeaderValue; "User-Agent": AxiosHeaderValue; "Content-Encoding": AxiosHeaderValue; Authorization: AxiosHeaderValue; } & { ...; }>”。

解决方案：

在使用拦截器时，使用InternalAxiosRequestConfig而不使用AxiosRequestConfig

// 请求拦截器
service.interceptors.request.use(
  / * 
    * 修改前：
    * (config: AxiosRequestConfig)
    * 修改后：
    * (config: InternalAxiosRequestConfig)
    */
  (config: InternalAxiosRequestConfig) => {
    // 在发送请求前做些什么，例如添加 token
    const token = localStorage.getItem('token');
    if (token && config.headers) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    console.error('Request Error:', error);
    return Promise.reject(error);
  }
);