如何导出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