如何導出Axios.create in Typescript

Question

我有這個工作：

export default axios.create({
  baseURL: 'sample',
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [
    (data) => {
      return JSON.stringify(data);
    },
  ],
});

但問題是一旦我編輯成這樣：

const API = () => {
 const token = 'sample'

  const api: AxiosInstance = axios.create({
    baseURL: 'http://localhost:5000',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    transformRequest: [
      (data) => {
        return JSON.stringify(data);
      },
    ],
    transformResponse: [
      (data) => {
        return JSON.parse(data);
      },
    ],
  });

  return api;
};

export default API;

我希望它是一個箭頭 function，這樣我就可以訪問 function 中的令牌。

問題是一旦我開始導入箭頭 function 它將產生一個不讀取 POST 方法的錯誤

import API from 'apis';

API.post 

有沒有辦法像箭頭 function 一樣實現它，但不會丟失類型定義或產生錯誤？

Answer 1

您不會丟失任何類型定義，但您不會將導入用作 function。

如果您編寫API().post它將起作用。

我建議執行以下操作：

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:5000',
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [
    (data) => {
      return JSON.stringify(data);
    },
  ],
  transformResponse: [
    (data) => {
      return JSON.parse(data);
    },
  ],
});

import store from '../store'

const listener = () => {
  const token = store.getState().token
  api.defaults.headers.common['Authorization'] = token;
}

store.subscribe(listener)

export default api;

您也可以在此處訪問令牌。

Answer 2

僅僅因為這是您查找我的問題時發現的問題，如果您使用require導入 axios，要使用正確的類型定義，您必須像這樣導入 ti：

const axios = require('axios').default
axios.create(...) // No error

這會報錯：

const axios = require('axios')
axios.create(...) // Error