带Typescript的Axios拦截器

uklbhaso 于 2022-11-05 发布在 iOS

关注(0)|答案(3)|浏览(553)

如何正确使用axios的inteceptor和typescript：

import axios, { AxiosRequestConfig, AxiosInstance } from 'axios'

HTTP.interceptors.request.use((config: AxiosRequestConfig) => config)

例如，当我创建axios示例时，我设置了默认配置：

const conf: AxiosRequestConfig = {
  baseURL: process.env.VUE_APP_API_URL
}

const HTTP: AxiosInstance = axios.create(conf)

但是当我尝试使用带有自定义头的拦截器时：

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>{
  headers: {
    'x-projectkey': 1234
  }
})

它不起作用：

Argument of type '(config: AxiosRequestConfig) => void' is not assignable to parameter of type '(value: AxiosRequestConfig) => AxiosRequestConfig | Promise<AxiosRequestConfig>'

我对TS还是个新手，搞不懂这个。

axios

来源：https://stackoverflow.com/questions/55933869/axios-interceptors-with-typescript

3条答案

按热度按时间

nfeuvbwi1#

您应该返回如下所示的配置：

HTTP.interceptors.request.use((config: AxiosRequestConfig) => {
  config.headers['x-projectkey'] = 1234

  return config
})

玩得开心点

赞(0）回复(0）举报 2022-11-05

4smxwvx52#

从你提到的错误中，你错过了一个返回。这应该是可行的：

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>({
  headers: {
    'x-projectkey': 1234
  }
}))

或者使用return关键字：

HTTP.interceptors.request.use((config: AxiosRequestConfig) =>{
  return {
    headers: {
      'x-projectkey': 1234
    }
  }
})

赞(0）回复(0）举报 2022-11-05

von4xj4u3#

转到AxiosRequestConfig的类型定义，你可以看到，包括axios头在内的所有内容都是可选的：

interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  timeout?: number;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  // ... omited 
}

当创建axiosInstance并添加配置时，应返回config，以便示例获取配置：

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use((config) => {
  if (config.headers) { // <- adding a check 
    config.headers["x-projectkey"] = 1234; // no errors
  }
  return config;
});

然后，在您使用axiosInstance发出的每个请求中，它将包含x-projectkey头：

axiosInstance.get("url");

赞(0）回复(0）举报 2022-11-05

我来回答

带Typescript的Axios拦截器

3条答案

相关问题

热门标签

最新问答