生命的意义在于折腾

Axios的typescript封装

ts

1import axios, {
2  AxiosInstance,
3  AxiosRequestConfig,
4  AxiosResponse,
5  AxiosError,
6} from "axios";
7import qs from "qs";
8
9// 后端返回的数据类型
10type ResponseData<T> = {
11  code: number;
12  data: T;
13  message: string;
14};
15// 创建axios实例
16const axiosInstance: AxiosInstance = axios.create({
17  timeout: 60000,
18});
19
20// 异常拦截处理器
21const errorHandler = (error: AxiosError) => {
22  if (error.response) {
23    switch (error.response.status) {
24      case 401:
25        // 登录过期错误处理
26        break;
27      case 500:
28        // 服务器错误处理
29        break;
30      default:
31    }
32  }
33  return Promise.reject(error);
34};
35// 请求拦截处理器
36axiosInstance.interceptors.request.use((config: AxiosRequestConfig) => {
37  // qs是axios自带的序列化参数方式
38  if (
39    config.headers &&
40    config.headers["Content-Type"] &&
41    (config.headers["Content-Type"] as string).includes(
42      "application/x-www-form-urlencoded"
43    )
44  ) {
45    config.params = qs.stringify(config.params);
46  }
47  return config;
48}, errorHandler);
49// 响应拦截处理器
50axiosInstance.interceptors.response.use((response: AxiosResponse) => {
51  return response.data;
52}, errorHandler);
53
54export function request<T>(config: AxiosRequestConfig<T>): Promise<T> {
55  return new Promise((resolve, reject) => {
56    axiosInstance
57      .request<T, AxiosResponse<ResponseData<T>>>(config)
58      .then((result: AxiosResponse<ResponseData<T>>) => {
59        const { data } = result;
60        if (data.code === 0) {
61          resolve(data.data);
62        } else {
63          reject(data);
64        }
65      })
66      .catch((err: AxiosError) => {
67        reject(err);
68      });
69  });
70}
71
阅读量:1776发布日期:2022-05-28 12:52:55

博客描述

Axios的typescript封装

留言板