TS封装axios - 技术栈

今天闲的无聊来给大家分享一下，使用ts如何封装axios，那么接下来进入正题，我们来看一下如何封装axios。首先我们可以查看axiox的官网，平常也是使用官网上的拦截器，来进请求拦截和响应拦截。下面是axios的官网地址，给小伙伴们放在下面啦：
点击这里进如axios官网

1.创建request.ts文件

文件位置：src/service/request.ts

首先我们在自己的项目当中安装axios

使用 npm:

javascript 复制代码

 npm install axios

使用 bower:

javascript 复制代码

bower install axios

使用 yarn:

javascript 复制代码

 yarn add axios

使用 pnpm:

javascript 复制代码

pnpm add axios

2.在request.ts文件中进行导入

因为要使用ts，因此需要导入axios的实例类型，以便后续的使用。

javascript 复制代码

// 导入axios
import axios from 'axios';
// 导入axios的实例类型
import type {
  AxiosInstance,
  InternalAxiosRequestConfig,
  AxiosResponse,
  AxiosError,
} from 'axios';

3.创建axios实例

创建实例对象的时候，就要标注出实例的类型，也就是service: AxiosInstance，AxiosInstance这个类型是从axios中引入的。

javascript 复制代码

// 导入axios
import axios from 'axios';
// 导入axios的实例类型
import type {
  AxiosInstance,
  InternalAxiosRequestConfig,
  AxiosResponse,
  AxiosError,
} from 'axios';

//1. 创建新的axios实例，
const service: AxiosInstance = axios.create({
  // 公共接口-
  baseURL: 'https://...',
  // 超时时间 单位是ms，这里设置了10s的超时时间
  timeout: 10 * 1000,
});

4.创建响应拦截器和请求拦截器

这些类型都会在上面进行导入，否则不标注的话，在后续使用实例的时候就可能会报错

config: InternalAxiosRequestConfig

error: AxiosError

response: AxiosResponse

javascript 复制代码

// 导入axios
import axios from 'axios';
// 导入axios的实例类型
import type {
  AxiosInstance,
  InternalAxiosRequestConfig,
  AxiosResponse,
  AxiosError,
} from 'axios';

//1. 创建新的axios实例，
const service: AxiosInstance = axios.create({
  // 公共接口-
  baseURL: 'https://...',
  // 超时时间 单位是ms，这里设置了10s的超时时间
  timeout: 10 * 1000,
});
//添加请求拦截器
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
  //这里可以设置你从后端拿到的token值，如果有token，配置请求头
   // const TOKEN = localStorage.getItem('TOKEN');
   // if (TOKEN) {
    // config.headers.Authorization = TOKEN;
   // }
    // 在发送请求之前做些什么
    return config;
  },
  function (error: AxiosError) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    return response.data;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

5.导出实例

javascript 复制代码

// 导入axios
import axios from 'axios';
// 导入axios的实例类型
import type {
  AxiosInstance,
  InternalAxiosRequestConfig,
  AxiosResponse,
  AxiosError,
} from 'axios';

//1. 创建新的axios实例，
const service: AxiosInstance = axios.create({
  // 公共接口-
  baseURL: 'https://...',
  // 超时时间 单位是ms，这里设置了10s的超时时间
  timeout: 10 * 1000,
});
//添加请求拦截器
service.interceptors.request.use(
  (config: InternalAxiosRequestConfig) => {
    const TOKEN = localStorage.getItem('TOKEN');
    if (TOKEN) {
      config.headers.Authorization = TOKEN;
    }
    // 在发送请求之前做些什么
    return config;
  },
  function (error: AxiosError) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse) => {
    return response.data;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default service;

6.那么接下来我们来看一下，get请求等的封装。

javascript 复制代码

import type { AxiosRequestConfig } from 'axios';
// 导入封装好的axios实例
import request from '@/service/request';
import type { IResData } from '../types/login_register/login';

const http = {
  /**
   * methods: 请求
   * @param url 请求地址
   * @param params 请求参数
   */
  get<T>(url: string, config?: AxiosRequestConfig): Promise<IResData<T>> {
    return request.get(url, config);
  },
  post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<IResData<T>> {
    return request.post(url, data, config);
  },
  put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<IResData<T>> {
    return request.put(url, data, config);
  },
  delete<T>(url: string, config?: AxiosRequestConfig): Promise<IResData<T>> {
    return request.delete(url, config);
  },
};
//导出
export default http;

导入依赖

javascript 复制代码

import type { AxiosRequestConfig } from 'axios';
import request from '@/service/request';  // 已经配置好的 axios 实例
import type { IResData } from '../types/login_register/login';  // 统一的响应类型

创建 http 对象
定义了一个 http 对象，包含四种常见的 HTTP 方法：

GET 请求

javascript 复制代码

get<T>(url: string, config?: AxiosRequestConfig): Promise<IResData<T>> {
  return request.get(url, config);
}

泛型：用于指定响应数据中 data 字段的类型

返回值：Promise<IResData> 确保类型安全的响应

POST 请求

javascript 复制代码

post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<IResData<T>> {
  return request.post(url, data, config);
}

多了一个 data 参数用于传递请求体数据

PUT 和 DELETE 请求
与上述类似，分别对应更新和删除操作。

7.使用示例

在src下创建一个api文件夹，创建对应的文件user.ts,在文件中进行编辑，例如以下内容。

javascript 复制代码

import type { AxiosRequestConfig } from 'axios';
// 导入封装好的axios实例
import request from '@/service/request';
import type { User} from '../types/user';
// 查询用户
const getUser = async (id: number) => {
  return http.get<User>(`/api/users/${id}`);
};

8.总结

Axios封装实现了类型安全与统一管理。通过创建配置化实例、添加拦截器，统一处理请求响应。业务层封装了常用HTTP方法，使用泛型确保类型安全。这提升了开发体验，简化了调用，增强了代码可维护性，为大型项目提供了可靠的网络请求解决方案。看完以后不要忘记点赞加关注呦~