自定义 Axios 实例

您可以在配置中添加一个 mutator 函数来设置 axios 的自定义实例。

1module.exports = {
2  petstore: {
3    output: {
4      ...
5      override: {
6        mutator: {
7          path: './api/mutator/custom-instance.ts',
8          name: 'customInstance',
9        },
10      },
11    }
12    ...
13  },
14};

1// custom-instance.ts
2
3import Axios, { AxiosRequestConfig } from 'axios';
4
5export const AXIOS_INSTANCE = Axios.create({ baseURL: '<BACKEND URL>' }); // 在此处使用您自己的 URL 或环境变量
6
7// 如果您想要为每个生成的查询传递额外的选项，请在此处添加第二个 `options` 参数
8export const customInstance = <T>(
9  config: AxiosRequestConfig,
10  options?: AxiosRequestConfig,
11): Promise<T> => {
12  const source = Axios.CancelToken.source();
13  const promise = AXIOS_INSTANCE({
14    ...config,
15    ...options,
16    cancelToken: source.token,
17  }).then(({ data }) => data);
18
19  // @ts-ignore
20  promise.cancel = () => {
21    source.cancel('Query was cancelled');
22  };
23
24  return promise;
25};
26
27// 在某些情况下，使用 react-query 和 swr 时，您可能想要覆盖返回的错误类型，您也可以在这里这样做
28export type ErrorType<Error> = AxiosError<Error>;
29
30export type BodyType<BodyData> = BodyData;
31
32// 或者，如果您想要包装 body 类型（可选）
33// （如果自定义实例在发送数据之前处理数据，比如改变大小写等）
34export type BodyType<BodyData> = CamelCase<BodyData>;