带有Typescript的Axios拦截器

Question

如何在typescript中正确使用axios的inteceptor：

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>'

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

Answer 1

你应该返回如下的config：

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

  return config
})

玩得开心。

Answer 2

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

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

或使用return关键字：

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