Axios结合Typescript 二次封装完整详细场景使用案例

Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。二次封装 Axios 主要是为了统一管理 HTTP 请求，例如设置统一的请求前缀、头部、超时时间，统一处理请求和响应的格式，以及错误处理等。

以下是一个使用 TypeScript 进行 Axios 二次封装的详细场景使用案例：

1. 创建 Axios 实例

首先，创建一个 Axios 实例，并配置通用参数。

import axios from'axios';const instance = axios.create({
  baseURL:'https://api.example.com',
  timeout:10000,// 请求超时时间
  headers:{'Content-Type':'application/json'}});exportdefault instance;

2. 统一请求处理

封装请求方法，包括统一的请求前缀、头部处理等。

// http.tsimport axios from'./path/to/axiosInstance';// 添加一个通用的请求前缀functionrequest(url:string, config?: AxiosRequestConfig){const fullPath =`/api/${url}`;// 可以在这里添加通用的 header 或其他配置const defaultConfig ={
    headers:{'Authorization':`Bearer ${localStorage.getItem('token')}`}};returnaxios({
    url: fullPath,...config,...defaultConfig
  });}exportdefault request;

3. 响应拦截器

处理响应拦截器，统一处理响应数据格式。

// http.ts (继续上面的代码)import axios,{ AxiosInstance }from'axios';// 响应拦截器
instance.interceptors.response.use(response =>{// 对响应数据做点什么return response.data;}, error =>{// 对响应错误做点什么returnPromise.reject(error);});exportdefault instance;

4. 错误处理

统一处理 HTTP 请求错误。

// http.ts (继续上面的代码)import{ AxiosError }from'axios';// 使用封装的请求函数functionhandleError(error: AxiosError){if(error.response){// 请求已发出，服务器响应了状态码 2xx 之外的其他状态console.error(error.response.data);console.error(error.response.status);console.error(error.response.headers);}elseif(error.request){// 请求已发出但没有收到响应console.error(error.request);}else{// 发生了触发请求错误的问题console.error('Error', error.message);}returnPromise.reject(error);}export{ handleError };

5. 使用封装的 HTTP 客户端

在组件或其他服务中使用封装的 HTTP 客户端进行请求。

// SomeComponent.vueimport http from'./path/to/http';import{ handleError }from'./path/to/http';exportdefault{asynccreated(){try{const response =awaithttp('/user',{
        method:'get'});this.user = response.data;}catch(error){handleError(error);}}};

6. 封装特定的 API 请求

创建特定的 API 服务文件，如用户服务。

// api/user.tsimport http from'../http';exportconstgetUser=(userId:string)=>http(`/users/${userId}`);exportconstupdateUser=(userId:string, userData: object)=>http(`/users/${userId}`,{
  method:'put',
  data: userData
});// 其他 API 调用 ...

7. 使用特定的 API 服务

在组件中使用特定的 API 服务。

// SomeComponent.vueimport{ getUser, updateUser }from'./api/user';exportdefault{
  methods:{asyncfetchUser(){try{const user =awaitgetUser('123');this.user = user;}catch(error){handleError(error);}},asyncsaveUser(){try{awaitupdateUser('123',{ name:'New Name'});}catch(error){handleError(error);}}}};

通过上述步骤，你可以创建一个可维护性高、易于使用的 HTTP 客户端，它包括统一的配置、拦截器、错误处理和 API 调用封装。这使得在项目中进行 API 请求变得更加一致和方便。