如何在 Typescript 中导出 Axios.create

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;

我希望它是一个箭头函数，这样我就可以访问函数内部的令牌。

问题是一旦我开始导入箭头函数，它会产生一个错误，不读取 POST 方法

import API from 'apis';

API.post 

有没有办法像箭头函数一样实现它，但不会丢失类型定义或产生错误？

Answer 1

您不会丢失任何类型定义，但您没有将导入用作函数。

如果你写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;

您也可以在此处访问令牌。