typescript封装axios_react+ts+函数组件怎么封装axios请求?

前言

最近工作繁忙，继上篇react+typescript构建h5项目已经一个月没有更新内容了。最近有个 h5 的项目正好使用到之前搭建的模板，于是将上述的模板拉过来，配个路由就直接可以使用了，节省不少时间。现在再将 axios 添加到项目中。这项下次再使用到的时候就会更加轻松。

功能

1. 常见配置（跨域携带 cookie，token，超时设置，请求头）
2. 请求拦截器和响应拦截器
3. 请求封装，使用同一套写法
4. 请求失败的提示信息
5. 支持单个请求的请求或者相应拦截单独处理

开始动手

首先安装 axios npm i axios -S，引入 axios，添加默认配置，其中基础路径 baseURL，一般是在.env 中拿在 cra 中使用 env，如果是复杂的情况也可以单独建一个文件，通过 window.location.host 在不同环境的区别等等修改 baseURL

// 引入axios和后面会用到的ts类型
import axios, {
   
  AxiosRequestConfig,
  AxiosRequestHeaders,
  AxiosInstance,
  AxiosResponse,
} from "axios";
// 使用QueryString,当content-type为表单时“application/x-www-form-urlencoded” 将参数拼接为类似于get请求的形式 (a=1&b=3)
import QueryString from "qs";
import {
    message } from "antd";

interface RequestConfig extends AxiosRequestConfig {
   
  headers: AxiosRequestHeaders;
}
const defaultConfig: RequestConfig = {
   
  baseURL: "",
  timeout: 120 * 1000, //超时
  withCredentials: true, //允许跨域携带cookie
  headers: {
   
    // content-type 可以先和后端沟通使用JSON还是表单，后面有少数不一样的特殊处理就行
    "content-type": "application/x-www-form-urlencoded",
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

上面就实现了基础配置的添加

const request = (
  method: "get" | "post" | "put" | "delete" | "patch" | "head" | "options",
  url: string,
  params?: any,
  config?: AxiosRequestConfig, //自定义的配置
  interceptor?: {
   
    request?: 
1
2
3
4
5
6
7