Axios перехватчики с Typescript

Question

Как правильно использовать перехватчики axios с машинописным текстом:

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, не могу понять это.

Answer 1

Из-за ошибки, о которой вы упоминаете, вы пропускаете возврат.Это должно работать:

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

Или используя ключевое слово return:

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

Answer 2

Вы должны вернуть конфигурацию, как показано ниже:

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

  return config
})

Веселитесь.