react 封装请求axios,直接调用即可

概要

我们在开发项目的时候,常常会遇到接口请求的问题的,若我们不进行接口的统一管理,代码开发不仅多而且很麻烦容易出错,也不利于项目的维护。下面我们一下学习下react项目中将如何封装请求,也从另一个方面中少写一些代码。哈哈

封装流程

1、在src目录下创建文件request

2、在文件request中创建api.ts和service.ts文件(默认ts格式类型)

3、在文件中写下封装代码

api.ts(主要写api请求接口)


export const LoginByAccount="/auth/login_weixin_by_account" //账号密码登录
export const LoginVcode="/login/vcode" //获取微信session

service.ts(axios请求封装)

//处理请求拦截和响应拦截
//引入
import axios  from "axios";//判断一下用户是否登录
function getToken(){ //获取tokenreturn sessionStorage.getItem('token')
}//3创建axios实例
let httpClient = axios.create({baseURL:"/api",timeout:6000,withCredentials:true
})//4创建请求拦截和响应拦截
httpClient.interceptors.request.use(//成功config=>{if(getToken()){config.headers['token']=getToken();}//返回return config},//错误err=>{return Promise.reject(err)})//响应拦截httpClient.interceptors.response.use(//成功response=>{let res = response.dataif(res.code=='401'){window.location.href='/login'}return Promise.resolve(res)},//错误err=>{return Promise.reject(err)})// 封装get请求
export const GET = (url:any, config = {}) => httpClient.get(url, config);// 封装post请求
export const POST = (url:any, data = {}, config = {}) => httpClient.post(url, data, config);// 封装put请求
export const PUT = (url:any, data = {}, config = {}) => httpClient.put(url, data, config);// 封装delete请求
export const DEL = (url:any, config = {}) => httpClient.delete(url, config);

4、页面的调用

import {POST} from "@/request/service"
import {LoginByAccount} from "@/request/api"const getCaptchaImg = async ()=>{//做验证码的请求GET(LoginVcode,'').then((res:any)=>{console.log(res);})
}

小结

实现起来比较简单,需要的小伙伴可以直接拿去用,在自己的项目上进行兼容调试即可

需要全部项目调试的源码可以前往

GitHub - yididid/react-manage: 主要运用了React + TypeScript + Vite + toolkit + redux技术来开发商品管理后台,开发了路由、接口请求(包含跨域解决)等基本功能的开发,喜欢的小伙伴可以拿去

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

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

相关文章

Maven实战—搭建微服务 Maven 工程架构

需求案例:搭建一个电商平台项目,该平台包括用户服务、订单服务、通用工具模块等。 项目架构: 用户服务:负责处理用户相关的逻辑,例如用户信息的管理、用户注册、登录等。订单服务:负责处理订单相关的逻辑…

mac 使用nvm配置nodejs

您可以按照以下步骤在Mac上安装指定版本的Node.js: 首先,请确保您已经安装了Homebrew。如果没有,请在终端中运行以下命令来安装Homebrew: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install…

Swift网络编程

Swift网络编程涉及到一些重要的方面,包括URLSession的使用、数据解析(JSON/XML)以及网络请求的封装与管理。下面将详细介绍这三个方面的内容。 1.URLSession的使用: URLSession是Swift中用于网络请求的核心类。它提供了一系列方法来创建和管…

使用示例解释.NET中的Mocking是什么?

让我们踏上探索.NET软件开发中Mocking概念的旅程,让我们深入了解Mocking是多么简单易懂、易于访问。请与我一起穿越这个主题,我将涵盖以下内容: 理解Mocking:为何它对于构建强大的测试策略至关重要。探索一些最常见的Mocking库&a…

Ansible组件说明

1.Ansible Inventory 工作当中有不同的业务主机,我们需要在把这些机器信息存放在inventory里面,ansible默认的inventory的文件是/etc/ansible/hosts,也可以通过ANSIBLE_HOSTS环境变量来指定或者运行ansible和ansible-playbook的时候用-i参数临…

Spring Boot 学习(6)——组件注册

也是学得头晕眼花,终于知道学有多么难了,更知道教有多么难了…… 各位大神们出的教程终归和正规出版社还是差距的,我觉得是没有“审定”,这对于大多数做教程的人来说这应该通病:自己做(讲)的东西…

视频教程下载:用ChatGPT玩转海外抖音TikTok

CHATGPT for TikTok是一门前沿课程,旨在帮助您充分发挥TikTok广告活动的全部潜力。随着数字营销的爆炸性增长,企业需要使用先进的工具来保持竞争优势。在这门课程中,您将学习如何利用CHATGPT——一种先进的人工智能工具——来创建与目标受众产…

有没有手机上使用的库存软件

库存软件是一种仓库的信息管理系统,它主要针对出库与入库这些数据进行管理,传统的库存管理都是在电脑上安装一个专门的数据库管理系统进行管理,这也是一种比较成熟的管理方式,那么有没有手机上使用的库存软件。 手机上使用的库存软…

k8s配置configmap指定到容器的指定文件

我们需要将名称为walletkey.properties的文件做成configmap,然后将walletkey.properties文件单独挂载出来到/data/walletkey.properties,且不能覆盖/data目录,具体如下 1、创建configmap configmap文件内容 其中walletkey.properties: >-引…

python语言零基础入门——注释、print()函数、input()函数

目录 一、注释 1.块注释 2.行内注释 3.多行注释 二、打印变量 1.print()函数:输出/打印指定内容 2.input()函数:输入指定内容 三、编程题:个人名片 一、注释 1.块注释 以#开始,直到本行结束都是注释为了保证代码的可读性…

科技的崛起:国内机器视觉蓬勃发展

文 | BFT机器人 在工业4.0的浪潮下,随着科技的蓬勃发展,机器视觉逐渐走入大众视野,机器视觉产品的普及范围也越来越广。 大家知道机器视觉的由来吗? 机器视觉的由来可以追溯到20世纪70年代,美国麻省理工学院&#xff…

STM32、ESP8266与MQTT连接阿里云物联网的串口通信异常解析

STM32、ESP8266与MQTT协议连接阿里云物联网平台时常见的串口通信异常介绍 在构建物联网应用时,STM32、ESP8266与MQTT协议的结合是实现设备与网络间稳定通信的关键。然而,在连接阿里云物联网平台的过程中,串口通信异常成为了一个常见的挑战。…

Docker常见命令学习

Docker 是一个开源的应用容器引擎,它允许开发者打包他们的应用以及应用的依赖包到一个轻量级、可移植的容器中,然后发布到任何支持 Docker 的系统上。以下是一些常用的 Docker 命令: docker run: 运行一个容器。例如,docker run -…

机器学习鸢尾花各种模型准确率对比

流程 获取数据集导入需要的包读取数据划分训练集和测试集调用各种模型比较准确率 获取数据集 链接:https://pan.baidu.com/s/1RzZyXsaiJB3e611itF466Q?pwdj484 提取码:j484 --来自百度网盘超级会员V1的分享导入需要的包 import pandas as pd impo…

Linux学习(嵌入式硬件知识)

EMMC eMMC(嵌入式多媒体卡)是一种内置型快闪存储解决方案,常见于嵌入式系统、移动设备和一些消费类电子产品中。它的设计集成了快闪存储器和控制器,并通过MMC(多媒体卡)接口连接到主处理器或主板上。这些是…

回归决策树的构建

回归决策树是一种决策树模型,顾名思义,它用于解决回归问题,即预测连续数值型的输出变量。它基于树状结构,通过一系列内部节点、分支和叶节点来建立数据特征与输出值之间的非线性关系。在构建回归决策树的过程中,数据集…

华为机考入门python3--(17)牛客17- 坐标移动

分类:字符串 知识点: 正则匹配 re.match(pattern, move) 格式字符串,可以在字符串中直接引用变量 f"{x},{y}" 题目来自【牛客】 import re def is_valid_coordinate(move): # 使用正则表达式验证移动是否合法 # ^: …

施耐德 PLC 及模块 ModbusTCP 通信配置方法

1. 通过【I/O扫描器】服务进行读写 相关文档:各模块说明书仅 NOE 网卡模块、部分 CPU 自带的网口支持 优点:不需要额外编程,系统自动周期型读写数据缺点:扫描周期不定,程序无法控制数据刷新的时序 2. 通过内部程序…

java扩展jmeter依赖

前置条件 创建一个maven项目&#xff0c; 引入依赖 <dependency><groupId>org.apache.jmeter</groupId><artifactId>ApacheJMeter_core</artifactId><version>3.2</version> </dependency> <dependency><groupId&g…

NIO学习

文章目录 前言一、主要模块二、使用步骤1.服务器端2.客户端 三、NIO零拷贝(推荐)四、NIO另一种copy总结 前言 NIO是JDK1.4版本带来的功能,区别于以往的BIO编程,同步非阻塞极大的节省资源开销&#xff0c;避免了线程切换和上下文切换带来的资源浪费。 一、主要模块 Selector&a…