2024 axios封装 包括请求拦截、错误码等

1.新建 codeMessage.ts

export default {200: "服务器成功返回请求的数据。",201: "新建或修改数据成功。",202: "一个请求已经进入后台排队(异步任务)。",204: "删除数据成功。",400: "发出的请求有错误,服务器没有进行新建或修改数据的操作。",401: "登录信息已失效,请重新登录。",403: "用户得到授权,但是访问是被禁止的。",404: "发出的请求针对的是不存在的记录,服务器没有进行操作。",405: "请求方法不被允许。",406: "请求的格式不可得。",410: "请求的资源被永久删除,且不会再得到的。",422: "当创建一个对象时,发生一个验证错误。",500: "服务器发生错误,请检查服务器。",502: "网关错误。",503: "服务不可用,服务器暂时过载或维护。",504: "网关超时。",
};

2.新建axios.ts

import axios from "axios";
import { Toast } from "antd-mobile";//三方库,可引入别的
import codeMessage from "./codeMessage";
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
const service = axios.create({baseURL: "/api",timeout: 100000,responseType: "json",headers: { "content-type": "application/json" },
});
/** 设置请求拦截 **/
service.interceptors.request.use((config) => {config.cancelToken = source.token; // 全局添加cancelToken(config as any).headers["Authorization"] = localStorage.getItem("token");return config;},(err) => {return Promise.reject(err);}
);
/** 设置响应拦截 **/
service.interceptors.response.use((response: any): any => {if (response && response?.status) {const { status, data } = response;if (status != 200) {const errorText = codeMessage[response.status] || response.statusText;Toast.show({content: errorText,});return response;}if (data?.code != 200) {Toast.show({content: data?.msg,});}return response;}},(error: any) => {if (axios.isCancel(error)) {// 取消请求的情况下,终端Promise调用链return new Promise(() => {});} else {return Promise.reject(error);}}
);
export default service;

3.新建request.ts

import service from "./axios";
// 方法映射
const methodEnum: Record<"get" | "post" | "upload" | "put",(url: string, params: any) => void
> = {get: (url: string, params = {}) => {return new Promise((resolve, reject) => {service.get(url, { params }).then((res) => {resolve(res.data);}).catch((err) => {reject(err);});});},post: (url: string, data = {}) => {return new Promise((resolve, reject) => {service.post(url, data, {headers: {"Content-Type": "application/json",},}).then((res) => {resolve(res.data);},(err) => {reject(err);});});},put: (url: string, data = {}) => {return new Promise((resolve, reject) => {service.put(url, data, {headers: {"Content-Type": "application/json",},}).then((res) => {resolve(res.data);},(err) => {reject(err);});});},upload: (url: string, files: any) => {return new Promise((resolve, reject) => {const config = {headers: { "Content-Type": "multipart/form-data" },};let data = new FormData();for (const key in files) {if (Object.prototype.hasOwnProperty.call(files, key)) {data.append(key, files[key]);}}data.append("file", files);return service.post(url, data, config).then((res) => {resolve(res);},(err) => {reject(err);});});},
};
type Method =| "get"| "post"| "upload"| "GET"| "POST"| "UPLOAD"| "put"| "PUT";
type RequsetData<T> = {method: Method;params: T;
};
// 请求方法
const requset = (url: string, requsetData: RequsetData<any>): any => {const { method, params } = requsetData;return methodEnum[method.toLocaleLowerCase() as Method](url, params);
};
export default requset;

4.使用方法

import requset from "./request";
// 获取详情
export const detail = (id: string
) => {return request(`/detail/${id}`, {method: "GET",params: {},});
}
type LoginParams = {phone: string;password: String;code: string;
}
// 登录
export const login = (params: LoginParams
) => {return request(`/login`, {method: "POST",params});
}

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

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

相关文章

Android中C++层fstream用法详解

fstream用于读写文件内容 ifstream用于读文件内容 ofstream用于写内容到文件 读本文章前&#xff0c;请读一下C 文件和流 | 菜鸟教程 目录 1. 打开文件open 2. 返回当前指针位置tellg, tellp 3. 设置文件读位置指针seekg 4. 设置文件写位置指针seekp 5. 如何在文件…

Axios 中不同的 responseType 选项

Axios 中不同的 responseType 选项&#xff1a; json&#xff1a; 描述&#xff1a; 这是默认设置。它表示服务器响应预计是 JSON 格式的。使用示例&#xff1a; axios.get(/api/data, { responseType: json }); text&#xff1a; 描述&#xff1a; 它表示服务器响应预计是纯…

day31_HTML

今日内容 0 复习昨日 1 表格标签 2 表单标签【重要】 3 框架标签 0 复习昨日 Javaweb开发,前端,服务器,数据库 前端,要学习HTML,CSS,JavaScript,JQuery HTML是用来编写网页的一种编程语言 语法 由各种标签组成,标签是尖括号<>,一般都是成对儿出现,前面叫做开标签,后面…

时间序列(Time-Series)Crossformer_EncDec.py代码解析

import torch import torch.nn as nn from einops import rearrange, repeat from layers.SelfAttention_Family import TwoStageAttentionLayer #用于合并时间序列的不同片段 class SegMerging(nn.Module): #初始化方法&#xff0c;参数包含模型维度d_model、窗口大小win…

GO——recover

定义 panic 改变程序控制流立即停止当前函数剩余代码&#xff0c;调用defer 只会执行当前协程的defer recover 可以终止panic造成的程序崩溃只能在defer中发挥作用 package mainimport ("fmt""time" )func main() {defer func() {fmt.Println("ma…

excel中多行合并后调整行高并打印

首先参考该文&#xff0c;调整全文的行高。 几个小技巧&#xff1a; 1.转换成pdf查看文件格式 2.通过视图--》分页预览&#xff0c;来确定每页的内容&#xff08;此时页码会以水印的形式显示&#xff09; 3. 页面布局中的&#xff0c;宽度可以选为自动&#xff0c;因为已经是…

算法工程师的工作:算法范围与技巧

算法工程师&#xff0c;作为计算机科学领域中的核心角色&#xff0c;负责设计和开发高效、可靠的算法。他们的工作涉及广泛的应用领域&#xff0c;从数据结构、机器学习到人工智能等。本文将探讨算法工程师的工作中涉及的算法范围&#xff0c;以及他们所掌握的关键技巧。 一、…

Linux——系统简介

1、从UNIX到LINUX 在目前主流的服务器端操作系统中&#xff0c;UNIX诞生于20世纪60年代末&#xff0c;Windows诞生于20世纪80年代中期&#xff0c;Linux诞生于20世纪90年代初&#xff0c;可以说UNIX是操作系统中的“老大哥”。 1.1、Linux简史 Linux内核最初是由李纳斯托瓦兹…

[TII 2023] 基于压缩感知的多级隐私保护方案

Multilevel Privacy Preservation Scheme Based on Compressed Sensing | IEEE Journals & Magazine | IEEE Xplore 摘要 物联网的广泛应用在给人们带来便利的同时&#xff0c;也引发了人们对数据采集、分析和共享过程中隐私泄露的担忧。本文提出了一种基于压缩感知的多级…

Cesium数据加载

文章目录 0.引言1.影像加载1.1Bing地图1.2天地图1.3ArcGIS在线地图1.4高德地图1.5OSM影像1.6MapBox影像 2.OGC地图服务2.1WMS2.2WMTS2.3TMS 3.GeoJSON数据加载4.KML数据加载5.TIFF数据加载6.点云数据加载7.地形数据加载7.1在线地形数据加载7.2本地地形数据加载 8.倾斜摄影模型数…

[BT]小迪安全2023学习笔记(第15天:PHP开发-登录验证)

第15天 名词解释 Cookie 是小型的文本文件&#xff0c;由网站发送到用户的浏览器&#xff0c;并存储在用户的设备上。Cookie 通常用于存储识别用户的信息&#xff0c;例如用户偏好、登录状态等。每当用户再次访问同一网站时&#xff0c;浏览器会将 Cookie 发送回服务器&#…

10 个值得分享给你前端低代码项目

今天来分享 10 个优秀的前端低代码项目&#xff01;企业级低代码快速开发平台&#xff0c;包含页面可视化配置、自定义表单、自定义报表、权限管理脚手架应用、前后端代码自动生成&#xff1b;主要特点是低代码开发&#xff0c;可实现复杂CRUD功能仅编写数据模型就能完成前后端…

unity代码创建animationclip,并对指定帧进行像素偏移

这段代码使用菜单按钮的方式&#xff0c;在Unity编辑器中创建AnimationClip&#xff0c;并对每一帧进行像素偏移。在Unity编辑器中&#xff0c;在Project面板中选择一个纹理&#xff0c;然后通过右键菜单选择Assets > Create > AnimationClip With Pixel Offset&#xff…

在CSS中如何寻找第一个元素

ul li:first-child {color: red; } 在CSS中&#xff0c;要找到第一个元素&#xff0c;可以使用:first-child选择器。该选择器可以用于选择父元素下的第一个子元素。例如&#xff0c;要选择一个ul元素下的第一个li元素&#xff0c;可以使用下面的代码&#xff1a; 上面的代码将…

扫雷游戏 bevy 实践(bevy 0.12)-1

经典的扫雷游戏 bevy 实践&#xff08;bevy 0.12&#xff09; 网上大多是0.6的 但愿大家能够摸索着 上手 参考资料&#xff1a; Bevy Minesweeper: Introduction - DEV Community &#xff08;原始教程&#xff0c;0.6版本&#xff09; https://github.com/leonidv/bevy-m…

在线教育App、H5、微信小程序项目

大型多端项目&#xff0c;uni-app开发 一、首页 二、课程页 以点击购买&#xff0c;购买后可以看到课程内容 种课程音频、视频等&#xff0c;以及专栏&#xff0c;都可以购买后观看 三、电子书 订阅成功后&#xff0c;就可以观看电子书了 选择章节 直播模块&#xff1a; 订阅…

云服务ECS扩容示例

原文可参考&#xff1a;【在Linux操作系统内扩容分区和文件系统_云服务器 ECS(ECS)-阿里云帮助中心】 示例1&#xff1a;扩容MBR分区和ext4文件系统 设备名&#xff1a;/dev/vda&#xff08;系统盘&#xff09;1个分区&#xff1a;/dev/vda1文件系统类型&#xff1a;ext4操作…

Linux 一键部署influxd2-telegraf 二进制方式

influxd2前言 influxd2 是 InfluxDB 2.x 版本的后台进程,是一个开源的时序数据库平台,用于存储、查询和可视化时间序列数据。它提供了一个强大的查询语言和 API,可以快速而轻松地处理大量的高性能时序数据。 telegraf 是一个开源的代理程序,它可以收集、处理和传输各种不…

零基础学习数学建模——(四)备战美赛

本篇博客将讲解如何备战美赛。 什么是美赛 美赛&#xff0c;全称是美国大学生数学建模竞赛&#xff08;MCM/ICM&#xff09;&#xff0c;由美国数学及其应用联合会主办&#xff0c;是最高的国际性数学建模竞赛&#xff0c;也是世界范围内最具影响力的数学建模竞赛。 赛题内容…

CuteHttpFileServer

需求 最近行政同时需要做文件共享&#xff0c;使用windows上的文件共享有些问题&#xff0c;ftp也是有问题&#xff0c;同时需要身份验证功能&#xff0c;找了很久&#xff0c;发现CuteHttpFileServer 这个文件服务器&#xff0c;可以解决这个需求&#xff0c;中间过程中也写过…