typescript - 带有 Typescript 的 Axios 拦截器

Question

如何正确使用 axios 的 inteceptors 和 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还是新手，无法弄清楚。

标签： typescriptaxios

Answer 1

您应该返回如下配置：

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

  return config
})

玩得开心。