当前位置: 首页 > news >正文

axios 进阶

axios 进阶

接口传参方式

使用 xhr 原生技术或者是 axios 时,它的 post 传参方式是键值对的形式 key=value。但是在实际开发中一般是使用对象的形式定义数据,方便读取和赋值。所以当我们需要发起请求时可以通过 qs 这一款插件将对象转成键值对形式,也可以将键值对形式转成对象,这样就省去了我们自己手动转换的代码。

:::warning 注意
接下来的会在上一个 axios 案例的基础上去做调整,如需要请查看 axios 使用。
:::


  1. 通过命令安装 qs 插件
$ yarn add qs
  1. 修改传参方式
import axios from 'axios'
import qs from 'qs'const data = qs.stringify({account: 'test',password: '123456'
})const p1 = axios({method: 'post',url: 'https://study.noxussj.top/api/login',data: data,headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'}
})p1.then((res) => {console.log(res.data)
})
  1. 修改后预览效果,依然是可以正常请求接口。

请求拦截器

请求拦截器一般是指在请求前需要做的一些处理,例如配置默认请求参数,或者把对象转成键值传参对方式等。这里要记住,每一次新的请求都会先经过请求拦截器。例如我们可以把 qs 转换方法写在请求拦截器中,这样就不需要在每次请求前都要调用 qs 做数据处理,从而节省了部分代码,也让请求参数格式统一成对象形式。

:::warning 注意
基于上面的案例在继续做优化,如需要请查看 axios 接口传参方式。
:::

import axios from 'axios'
import qs from 'qs'/*** 请求拦截器*/
axios.interceptors.request.use((config) => {config.data = qs.stringify(data)return config
})/*** 发起请求*/
const data = { account: 'test', password: '123456' }const p1 = axios({method: 'post',url: 'https://study.noxussj.top/api/login',data: data,headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})p1.then((res) => {console.log(res.data)
})

修改后预览效果,依然是可以正常请求接口。

响应拦截器

响应拦截器一般是指接口响应成功,准备返回接收的数据之前做的一些处理。例如只返回核心部分数据、判断后端的 code 是否正常,错误则弹出提示框提示等。这里要记住,每一次新的请求数据返回之前都会先经过响应拦截器。

:::warning 注意
基于上面的案例在继续做优化,如需要请查看 axios 请求拦截器。
:::

import axios from 'axios'
import qs from 'qs'/*** 请求拦截器*/
axios.interceptors.request.use((config) => {config.data = qs.stringify(data)return config
})/*** 响应拦截器*/
axios.interceptors.response.use((response) => {if (response.data.code !== 200) {alert('接口响应失败')}return response.data
})/*** 发起请求*/
const data = { account: 'test', password: '123456' }const p1 = axios({method: 'post',url: 'https://study.noxussj.top/api/login',data: data,headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})p1.then((res) => {console.log(res.data)
})

原文链接:菜园前端

相关文章:

axios 进阶

axios 进阶 接口传参方式 使用 xhr 原生技术或者是 axios 时,它的 post 传参方式是键值对的形式 keyvalue。但是在实际开发中一般是使用对象的形式定义数据,方便读取和赋值。所以当我们需要发起请求时可以通过 qs 这一款插件将对象转成键值对形式&…...

Redis限流实践:实现用户消息推送每天最多通知2次的功能

🏆作者简介,黑夜开发者,CSDN领军人物,全栈领域优质创作者✌,CSDN博客专家,阿里云社区专家博主,2023年6月CSDN上海赛道top4。 🏆数年电商行业从业经验,历任核心研发工程师…...

uniapp 存储base64资源为http链接图片

1. 新建一个base64.js 文件 const fsm wx.getFileSystemManager(); // base64data base64资源 // name 文件名 function base64src(base64data, name, cb) {const time new Date().getTime();const filePath ${wx.env.USER_DATA_PATH}/${name}.${time}.png;const buffer …...

列表类控件虚拟化

WPF列表控件提供的最重要的功能是UI虚拟化(WPF编程宝典说的)。所有的WPF列表控件(所有继承自ItemsControl的控件,包括ListBox、CombBox、ListView、TreeView、DataGrid)都支持UI虚拟化。 UI虚拟化的支持实际上没有被构…...

c# 多线程Task.Run 取消正在执行的多线程

c# 异步处理,上次处理没有完成,下次有紧接着处理多线程出错 在 C# 中进行异步处理时,确保处理上一个任务完成后再处理下一个任务是很重要的,特别是在涉及多线程的情况下。如果上一个任务尚未完成,而下一个任务又开始执…...

sql server 如何设置主键

开始之前 限制和局限 一个表只能包含一个 PRIMARY KEY 约束。 在 PRIMARY KEY 约束中定义的所有列都必须定义为 NOT NULL。 如果没有指定为 Null 性,则加入 PRIMARY KEY 约束的所有列的为 Null 性都将设置为 NOT NULL。 创建主键会自动创建相应的唯一群集索引、…...

【LeetCode-中等题】19. 删除链表的倒数第 N 个结点

文章目录 题目方法一:节点加入集合找索引方法二:直接计算长度,然后找出要删除的节点的前一个节点方法三:栈方法四:前后双指针 题目 这题的关键在与两个点 一定要设置一个哑结点,防止删除第一个元素时,导致空…...

Matlab图像处理-减法运算

减法运算 图像减法也称为差分方法,是一种常用于检测图像变化及运动物体的图像处理方法。常用来检测一系列相同场景图像的差异,其主要的应用在于检测同一场景下两幅图像之间的变化或是混合图像的分离。 差影法 将同一景物在不同时问拍摄的图像或同一景…...

stm32之11.USART串口通信

可以添加上拉电阻&#xff0c;但会增加功耗&#xff0c;传输距离变长 要添加库函数USART 官方参考文档说明书位置 ALT&#xff0b;左键可实现整体删除&#xff08;如下图&#xff09; 输出模式第三种模式AF ---------------------- 源码 远程控制pc端 #include <stm32f4x…...

Python实现T检验

今天来分享一下T检验的python实现方法。 01 先来上一波概念。 1.单样本t检验&#xff0c;又称单样本均数t检验&#xff0c;适用于来自正态分布的某个样本均数与已知总体均数的比较&#xff0c;其比较目的是检验样本均数所代表的总体均数是否与已知总体均数有差别。已知总体均数…...

校招算法题实在不会做,有没有关系?

文章目录 前言一、校招二、时间复杂度1、单层循环2、双层循环 三、空间复杂度四、数据结构五、校招算法题实在不会做&#xff0c;有没有关系&#xff1f;六、英雄算法集训 前言 英雄算法联盟八月集训 已经接近尾声&#xff0c;九月算法集训将于 09月01日 正式开始&#xff0c;目…...

Michael.W基于Foundry精读Openzeppelin第32期——SignatureChecker.sol

Michael.W基于Foundry精读Openzeppelin第32期——SignatureChecker.sol 0. 版本0.1 SignatureChecker.sol 1. 目标合约2. 代码精读2.1 isValidSignatureNow(address signer, bytes32 hash, bytes memory signature) 0. 版本 [openzeppelin]&#xff1a;v4.8.3&#xff0c;[for…...

如何修改字符串内容?

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; String 1. 修改字符串2. StringBuilder和…...

pgadmin4中的备份与恢复

一&#xff0c;postgresql 数据的备份与恢复 &#xff08;一&#xff09;数据库备份与恢复 1&#xff0c;备份 windows环境 1> dump 逻辑备份 1&#xff0c;用管理员身份打开power shell 2&#xff0c;切换到本机 postgresql 安装目录下的 bin 目录&#xff1a; PS C…...

内网穿透——搭建私人影音媒体平台

文章目录 1. 前言2. Jellyfin服务网站搭建2.1. Jellyfin下载和安装2.2. Jellyfin网页测试 3.本地网页发布3.1 cpolar的安装和注册3.2 Cpolar云端设置3.3 Cpolar本地设置 4.公网访问测试5. 结语 1. 前言 随着移动智能设备的普及&#xff0c;各种各样的使用需求也被开发出来&…...

使用psql操作PostgreSQL数据库

postgresql的操作和mysql差别较大。。 可以使用 psql 命令行工具或者其他的 PostgreSQL 客户端工具来查看表。如下是使用 psql 命令行工具查看表的方法&#xff1a; 连接到 PostgreSQL 数据库&#xff1a; 如果一个PostgreSQL的连接为 postgresql://用户名:密码127.0.0.1:5432/…...

什么是网络取证(Network Forensics)

企业采用新技术来检查其网络安全是否存在零日漏洞&#xff0c;与立即指示问题的物理层不同&#xff0c;黑客攻击尝试可能会被忽视并变得严重&#xff0c;直到对网络流量有一个整体的可见性。通过实时监控来跟踪其源和目标的流量&#xff0c;以查明问题或潜在问题的根源。 什么…...

农村农产品信息展示网站的设计与实现(论文+源码)_kaic

摘 要 随着软件技术的迅速发展,农产品信息展示的平台越来越多,传统的农产品显示方法将被计算机图形技术取代。这种网站技术主要把农产品的描述、农产品价格、农产品图片等内容&#xff0c;通过计算机网络的开发技术&#xff0c;在互联网上进行展示&#xff0c;然后通过计算机网…...

keepalived+lvs(DR)(四十六)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、作用 二、调度器配置 三、web节点配置 一、作用 使用keepalived解决lvs的单点故障 高可用集群 二、调度器配置 安装keepalived yum install -y k…...

从数据孤岛到企业xPA的演化

“数据孤岛”一直以来是企业在信息化进程中面临的比较头疼的问题&#xff0c;由于数据独立存在于不同部门之中&#xff0c;无法进行相互联动&#xff0c;致使数据库无法兼容&#xff0c;这无形中加大了跨部门合作的沟通成本。在此背景下&#xff0c;一种新兴的规划方法——扩展…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

聊聊 Pulsar:Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...