TypeScript与Axios集成指南：类型安全的HTTP请求实现

发表于 更新于 分类于
详细讲解如何在TypeScript项目中正确集成和使用Axios，包括请求拦截器、响应处理和类型定义，帮助你构建类型安全的HTTP请求客户端。

编写 request.ts

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
import type {
  AxiosError,
  AxiosRequestConfig,
  AxiosResponse,
  InternalAxiosRequestConfig,
} from "axios";
import axios from "axios";

// 创建axios实例
const request = axios.create({
  baseURL: "http://{需要请求的服务器地址}",
  timeout: 60 * 1000,
  params: {},
});

request.interceptors.request.use(
  function (config: InternalAxiosRequestConfig) {
    // 在发送请求之前做些什么
    return config;
  },
  function (error: any) {
    // 对请求错误做些什么
    console.log(error);
    return Promise.reject(error);
  }
);

// 添加响应拦截器
request.interceptors.response.use(
  function (response: AxiosResponse) {
    // 成功返回时处理数据
    return response;
  },
  function (error: AxiosError<{ code: number; msg: string; time: number }>) {
    // 出错时调用
    return Promise.reject(error);
  }
);

export interface Response<T = any> {
  code: number;
  data: T;
  msg: string;
  time: number;
}

const req = async <T>(config: AxiosRequestConfig) => {
  const res = await request(config);
  return res.data as T;
};
export default req;

编写接口函数

示例 api/hello.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import type { Response } from "@/lib/request";
import req from "@/lib/request";

export type HelloApiResp = {
  msg: string;
};

export const sayHello = (params: { name: string } = { name: "world" }) => {
  return req<Response<HelloApiResp>>({
    url: "/api/hello",
    method: "GET",
    params,
  });
};

使用示例

import { sayHello } from "@/api/demo";

sayHello({ name: "x" }).then((res) => {
  console.log(res.msg);
});