TypeScript与Axios结合使用设置Header头报错,提示对象可能为空

报错截图

既然用TS,就应该严格遵守它的要求,我在网上找的这段代码,使用后反复报错,Ctrl点进对象内部也看不出个所以然来。export type AxiosRequestHeaders = Record<string, string>;

经过反复琢磨,知道它这个Record类型是要接收一个对象Key:Value形式,于是尝试修改成KV形式,代码如下:

通过解构将原有`config`复制一份,再拼接要添加的新属性即可,再也看不见错误提示了👌🏻

axiosInstance.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers = {
        ...config.headers,
        Authorization: `Bearer ${token}`
      };
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

本文系作者 @ 原创发布在 徐小鹏的个人分享。未经许可,禁止转载。

Like()
feacx
站长
31 Posts
0 Comments
97 Likes
Top