利用Axios封装及泛型实现定制化HTTP请求处理

      本案例旨在教授如何使用Axios库结合TypeScript泛型进行HTTP请求的高级封装,以提升代码的可复用性和类型安全性。我们将通过一个具体的示例,学习如何创建一个通用的请求函数,它能够适应不同类型的API响应,并在请求前后加入自定义逻辑(如错误处理、Token注入等)。

1. 引入必要的库和类型

  • 引入Axios:首先,我们导入Axios库及其相关类型,用于发起网络请求。
  • 定义类型:引入AxiosInstance和AxiosRequestConfig类型,以增强代码的类型提示和安全性。
import axios, { type AxiosResponse } from 'axios';
import type { AxiosInstance, AxiosRequestConfig } from 'axios';

2. 创建Axios实例并配置

  • 配置基础设置:通过axios.create方法创建一个Axios实例,并设置基础URL和超时时间等默认配置
const axiosInstance: AxiosInstance = axios.create({baseURL: 'https://tenapi.cn/v2/',timeout: 10000
});

3. 添加请求和响应拦截器

  • 请求拦截器:在请求发送前可以统一处理逻辑,如添加认证信息。
  • 响应拦截器:对返回的响应进行统一处理,如错误码判断。
axiosInstance.interceptors.request.use(config => {// 可以在此处添加Token或其他请求头return config;
}, error => Promise.reject(error));axiosInstance.interceptors.response.use(res => res, error => Promise.reject(error));

 4. 定义API响应接口

  • ApiResponse接口:定义一个泛型接口来规范API响应的结构,包含状态码、消息、时间戳和数据部分。
export interface ApiResponse<T = any> {code: number;msg: string;timestamp: number;data: T;
}

5. 封装请求函数

  • 泛型request函数:创建一个异步的泛型函数request,它接受请求配置并返回经过类型转换的响应数据。 
export async function request<T>(config: AxiosRequestConfig): Promise<T> {return axiosInstance.request<ApiResponse<T>>(config).then(res => res.data);
}

6. 使用封装的请求函数

  • 具体请求示例:定义一个数据模型Hot,并使用request函数发起请求,处理响应数据
interface Hot {name: string;url: string;hot: number;
}request<Array<Hot>>({url: '/baiduhot',method: 'get'
}).then(res => {if(res.code === 200) {const hot = res.data[0];console.log(hot.name);}
});

6. 完整代码

import axios, {type AxiosResponse} from 'axios';
import type { AxiosInstance, AxiosRequestConfig } from 'axios';/* 创建axios实例 */
const axiosInstance : AxiosInstance = axios.create({baseURL: 'https://tenapi.cn/v2/',timeout: 10000
});/* 封装实例的请求拦截器 */
axiosInstance.interceptors.request.use( config  => {return config;
}, (error) => {return Promise.reject(error);
});/* 封装实例的响应拦截器 */
axiosInstance.interceptors.response.use( (res : AxiosResponse<any>)  => {return res;
}, (error) => {return Promise.reject(error);
});/* 定义接口 */
export interface ApiResponse<T> {code: number;msg: string;timestamp: number;data: T;
}/* 封装实例的请求方法 */
export async function request<T>(config: AxiosRequestConfig ) {// axios实例的 request 接受的第一个泛型参数,就是返回数据data的类型return axiosInstance.request<ApiResponse<T>>(config).then((res) => res.data);
}/* 如何使用代码如下  */
interface Hot {name: string;url: string;hot: number;
}request<Array<Hot>>({url: '/baiduhot',method: 'get'
}).then(res => {if(res.code == 200) {let hot = res.data[0];console.log(hot.name);}
});

提示:更多的Axios配置信息请看官网

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/28019.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

跨文化美学实践:以‘Shockman登峰侠‘为例探析翻译艺术与文化意蕴

"Shockman登峰侠"这一组合&#xff0c;实际上是在尝试融合直译与意译的翻译策略&#xff0c;既保留了原英文名称&#xff0c;又通过附加一个富有象征意义的中文称号来丰富角色的形象和内涵。这种翻译实践&#xff0c;展现了汉语翻译美学中的几个重要方面&#xff1a;…

LeetCode 每日一题 2024/6/10-2024/6/16

记录了初步解题思路 以及本地实现代码&#xff1b;并不一定为最优 也希望大家能一起探讨 一起进步 目录 6/10 881. 救生艇6/11 419. 甲板上的战舰6/12 2806. 取整购买后的账户余额6/13 2813. 子序列最大优雅度6/14 2786. 访问数组中的位置使分数最大6/15 2779. 数组的最大美丽值…

React@16.x(26)useContext

目录 1&#xff0c;上下文的使用2&#xff0c;useContext 1&#xff0c;上下文的使用 之前的文章中介绍过 context上下文。 使用举例&#xff1a; import React, { useState } from "react";const ctx React.createContext();function Child() {return <ctx.C…

Transformer系列:图文详解Decoder解码器原理

从本节开始本系列将对Transformer的Decoder解码器进行深入分析。 内容摘要 Encoder-Decoder框架简介shifted right移位训练解码器的并行训练和串行预测解码器自注意力层和掩码解码器交互注意力层和掩码解码器输出和损失函数 Encoder-Decoder框架简介 在原论文中Transformer用…

论文发表CN期刊《高考》是什么级别的刊物?

论文发表CN期刊《高考》是什么级别的刊物&#xff1f; 《高考》是由吉林省长春出版社主管并主办的省级教育类期刊&#xff0c;期刊以科教兴国战略为服务宗旨&#xff0c;专门反映和探索国内外教育教学和科研实践的最新成果。该期刊致力于为广大教育工作者提供一个高质量的学术…

idea自定义注释模板

1、打开配置 setting -> Editor -> Live Template 2、添加TemplateGroup&#xff0c;并在添加的TemplateGroup下加LiveTemplate 3、配置Live Template 内容&#xff1a; **** Description: * $param$* return $return$ * author $user$* date $date$ $time$**/变量…

oracle RAC安装 保姆级教程

使用SSHXmanager 我的本地IP是172.17.68.68 服务器配置 [rootrac12-1 ~]# cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.localdomain4 ::1 localhost localhost.localdomain localhost6 localhost6.localdomain6 #Public IP …

ARP协议相关

把ip地址解析成mac地址这里的mac地址就是路由器的mac地址 免费ARP 源ip和目的ip都是一样的&#xff0c;那怎么让其他人更新arp表呢&#xff1f;&#xff1f; 是因为目标mac是全f&#xff0c;是一个广播报文 如果冲突就是ip一样但是mac又不一样 代理ARP pc1和pc4是在同一个子网…

MySQL安全性策略:用户认证与数据加密

用户认证 定义和重要性 在数据库管理系统中&#xff0c;用户认证是关键的安全策略之一。用户认证意味着验证一个用户是否有权访问数据库系统。这对于确保只有合法用户可以访问和修改数据至关重要&#xff0c;它可以防止未经授权的访问和潜在的数据损坏。 MySQL用户账号管理…

【什么是几度cms,主要功能有什么】

几度CMS内容管理框架是基于 PHP 语言采用最新 Thinkphp 作为开发框架生产的网站 内容管理框架&#xff0c;提供“电脑网站 手机网站 多终端 APP 接口”一体化网站技术解 决方案。她拥有强大稳定底层框架&#xff0c;以灵活扩展为主的开发理念&#xff0c;二次开发方便且…

分库分表实践:单 KEY 业务场景

前言 ​ 随着业务的快速增长和数据量的爆炸性增加&#xff0c;传统的单体数据库架构已经难以满足性能和扩展性的需求。为了解决这一问题&#xff0c;分库分表技术应运而生&#xff0c;成为支撑大规模业务的重要手段。 分库分表方式 中间件 Cobar&#xff1a;阿里巴巴开发的…

C++格式化库fmt使用方法

1. 格式化库fmt简介 fmt github地址 api说明 格式化参数说明 内容的格式化&#xff0c;体现在代码中主要表现为字符串、基本类型、自定义类型的拼接。例如说打印日志、拼接变量等。C中我们会经常使用类似printf,snprintf(C风格使用不方便),std::string.append(繁琐), std::io…

[DDR4] DDR1 ~ DDR4 发展史导论

依公知及经验整理&#xff0c;原创保护&#xff0c;禁止转载。 专栏 《深入理解DDR4》 内存和硬盘是电脑的左膀右臂&#xff0c; 挑起存储的大梁。因为内存的存取速度超凡地快&#xff0c; 但内存上的数据掉电又会丢失&#xff0c;一直其中缓存的作用&#xff0c;就像是我们的工…

四川汇聚荣聚荣科技有限公司是干什么的,拼多多运营如何做?

四川汇聚荣聚荣科技有限公司是干什么的&#xff0c;拼多多运营如何做?随着电商行业的快速发展&#xff0c;越来越多的企业开始涉足这一领域。其中&#xff0c;四川汇聚荣聚荣科技有限公司便是其中的一员。那么&#xff0c;这家公司究竟是做什么的呢?简单来说&#xff0c;它是…

WSL Ubuntu安装TensorFlow-GPU、PyTorch-GPU

在Windows 11的WSL Ubuntu中安装TensorFlow-GPU、PyTorch-GPU 0、WSL Ubuntu安装 在Windows 11的商店中下载即可&#xff0c;此处以Ubuntu22.04.3为例 1、CUDA Toolkit安装 参考公孙启的文章Windows11 WSL Ubuntu Pycharm Conda for deeplearning前往nVidia官网下载CUDA …

前端面试题日常练-day70 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末 TypeScript中&#xff0c;以下哪个关键字用于声明一个变量的类型为元组类型&#xff1f; a) tuple b) array c) object d) record 在TypeScript中&#xff0c;以下哪个符号用于声明一个变量的类型为函…

代码随想录算法训练营刷题复习2 :动态规划——打家劫舍系列+买卖股票系列

复习刷题第二天&#xff1a;动态规划——打家劫舍系列买卖股票系列 一、打家劫舍系列&#xff1a; 主要设置限定条件不能选择连续的两个值&#xff0c;这里判断偷不偷第(i)家&#xff0c;取决于 偷(i-1) 与 偷(i-2) (i)哪种情况划得来 198.打家劫舍 213.打家劫舍Ⅱ 这个题的…

靠谱放心!康姿百德柔压磁性豪华枕质量大揭秘

康姿百德柔压磁性豪华枕&#xff0c;舒爽透气呵护青春期娇嫩肌肤 良好的睡眠对青少年的生长发育至关重要&#xff0c;想要获得高质量睡眠&#xff0c;除了选择合适的床垫之外&#xff0c;一款合适的枕头同样是打造优质睡眠环境的重要一环。康姿百德集团有限公司深耕睡眠领域已…

记录认识相亲对象的帖子——之一——困惑金钱

我的提问&#xff1a; 我经常觉得我连自己都养不活&#xff0c;还负责了10多w, 作为中国的父母&#xff0c;他们强烈认为亲戚给我介绍一个对象&#xff0c;我就要主动积极的去联系女方&#xff0c;我对自己有比较清楚的认识。认为自身条件太差&#xff0c;然后我不愿意花钱给女…

electron模板【lectron-react-boilerplate】多窗口配置【HtmlWebpackPlugin】多页面配置

如果您正在使用electron-react-boilerplate进行快速的Electron应用程序开发,您可能会遇到想要在桌面应用程序中拥有多个原生窗口的情况。 MacOS窗口图像由OpenClipart-Vectors提供,来源Pixabay。 开始之前需要提及的事情! Electron有一个主进程和渲染进程的模式。可以有多个…