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

【axios网络请求库】认识Axios库;axios发送请求、创建实例、创建拦截器、封装请求

目录

  • 1_认识Axios库
  • 2_axios发送请求
  • 3_axios创建实例
  • 4_axios的拦截器
  • 5_axios请求封装

1_认识Axios库

功能特点:

  • 在浏览器中发送 XMLHttpRequests 请求
  • 在 node.js 中发送 http请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据

2_axios发送请求

支持多种请求方式:

  • axios(config)
  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

有时候, 可能需求同时发送两个请求

  • 使用axios.all, 可以放入多个请求的数组.
  • axios.all([]) 返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

常见的配置选项

(前三个选项常用)

  • 请求地址 url: ‘/user’,

  • 请求类型 method: ‘get’,

  • 请求根路径 baseURL: ‘http://www.mt.com/api’,

  • 请求前的数据处理 transformRequest:[function(data){}],

  • 请求后的数据处理 transformResponse: [function(data){}],

  • 自定义的请求头 headers:{‘x-Requested-With’:‘XMLHttpRequest’},

  • URL查询对象 params:{ id: 12 }

  • 查询对象序列化函数 paramsSerializer: function(params){ }

  • request body为 data: { key: ‘aa’},

  • 超时设置 timeout: 1000,

demo1

// 1.发送request请求
axios.request({url: "http://123.207.32.32:8000/home/multidata",method: "get"
}).then(res => {console.log("res:", res.data)
})// 2.发送get请求
axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then(res => {console.log("res:", res.data.lrc)
})
axios.get("http://123.207.32.32:9001/lyric", {params: {id: 500665346}
}).then(res => {console.log("res:", res.data.lrc)
})// 3.发送post请求
axios.post("http://123.207.32.32:1888/02_param/postjson", {data: {name: "coderwhy",password: 123456}
}).then(res => {console.log("res", res.data)
})

demo2

// 1.baseURL
const baseURL = "http://123.207.32.32:8000"// 给axios实例配置公共的基础配置
axios.defaults.baseURL = baseURL
axios.defaults.timeout = 10000
axios.defaults.headers = {}// 1.get: /home/multidata
axios.get("/home/multidata").then(res => {console.log("res:", res.data)
})// 2.axios发送多个请求
// Promise.all
axios.all([axios.get("/home/multidata"),axios.get("http://123.207.32.32:9001/lyric?id=500665346")
]).then(res => {console.log("res:", res)
})

3_axios创建实例

从axios模块中导入对象时, 使用的实例是默认的实例;

  • 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
  • 但是后续开发中, 某些配置可能会不太一样;
  • 比如某些请求需要使用特定的baseURL或者timeout等.
  • 这时,就可以创建新的实例, 并且传入属于该实例的配置信息

// axios默认库提供实例对象
axios.get("http://123.207.32.32:9001/lyric?id=500665346")// 创建其他的实例发送网络请求
const instance1 = axios.create({baseURL: "http://123.207.32.32:9001",timeout: 6000,headers: {}
})instance1.get("/lyric", {params: {id: 500665346}
}).then(res => {console.log("res:", res.data)
})const instance2 = axios.create({baseURL: "http://123.207.32.32:8000",timeout: 10000,headers: {}
})



4_axios的拦截器

axios的也可以设置拦截器:拦截每次请求和响应

  • axios.interceptors.request.use(请求成功拦截, 请求失败拦截)
  • axios.interceptors.response.use(响应成功拦截, 响应失败拦截)

demo

// 对实例配置拦截器
//【请求】
axios.interceptors.request.use((config) => {console.log("请求成功的拦截")// 1.开始loading的动画// 2.对原来的配置进行一些修改// 2.1. header// 2.2. 认证登录: token/cookie// 2.3. 请求参数进行某些转化return config
}, (err) => {console.log("请求失败的拦截")return err
})
//【响应】
axios.interceptors.response.use((res) => {console.log("响应成功的拦截")// 1.结束loading的动画// 2.对数据进行转化, 再返回数据return res.data
}, (err) => {console.log("响应失败的拦截:", err)return err
})axios.get("http://123.207.32.32:9001/lyric?id=500665346").then(res => {console.log("res:", res)
}).catch(err => {console.log("err:", err)
})

5_axios请求封装

便于以后突发情况,比如axios库不再维护

import axios from 'axios'class HYRequest {constructor(baseURL, timeout=10000) {this.instance = axios.create({baseURL,timeout})}request(config) {return new Promise((resolve, reject) => {this.instance.request(config).then(res => {resolve(res.data)}).catch(err => {reject(err)})})}get(config) {return this.request({ ...config, method: "get" })}post(config) {return this.request({ ...config, method: "post" })}
}export default new HYRequest("http://123.207.32.32:9001")




















































































































相关文章:

【axios网络请求库】认识Axios库;axios发送请求、创建实例、创建拦截器、封装请求

目录 1_认识Axios库2_axios发送请求3_axios创建实例4_axios的拦截器5_axios请求封装 1_认识Axios库 功能特点: 在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据 2_axios发送请求 支持多种请求方式: axios…...

Android——基本控件(下)(二十一)

1. 数据存储 1.1 知识点 (1)掌握Android数据存储的分类; (2)可以使用SharedPreferences存储数据。 1.2 具体内容 对于我们数据的存储而言,Android一共提供了5个数据存储的方式:SharedPrefe…...

websocket基础

下面就以代码来进行说明 1&#xff0c;先导入websocket依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency> 2.编写websocket相关bean管理配置 Config…...

游戏思考30(补充版):关于逆水寒铁牢关副本、白石副本和技能的一些注释(2023/0902)

前期介绍 我是一名逆水寒的玩家&#xff0c;做一些游戏的笔记当作攻略记录下来&#xff0c;荣光不朽-帝霸来源视频连接 传送门 一、旧版铁牢关&#xff08;非逆水寒老兵服&#xff09; &#xff08;1&#xff09;老一&#xff1a;巨鹰 1&#xff09;机制一&#xff1a;三阵风…...

【数据蒸馏】静态数据蒸馏方法汇总

基于几何的方法 基于几何的方法假设在特征空间中彼此接近的数据点往往具有相似的属性。因此&#xff0c;基于几何的方法试图移除那些提供冗余信息的数据点&#xff0c;剩下的数据点形成一个核心集合S&#xff0c;其中jSj ≤ jTj。 Herding&#xff08;聚集&#xff09; 是一…...

Cortex-A7 架构

参考《 Cortex-A7 Technical ReferenceManua.pdf 》和《 ARM Cortex-A(armV7) 编程手 册 V4.0.pdf 》 【 正点原子】I.MX6U嵌入式Linux驱动开发指南V1.6学习 1.Cortex-A7 MPCore 简介 I.MX6UL 使用的是 Cortex-A7 架构&#xff0c;Cortex-A7 MPcore 处理器支持 1~4 核&#…...

2023年“羊城杯”网络安全大赛 Web方向题解wp 全

团队名称&#xff1a;ZhangSan 序号&#xff1a;11 不得不说今年本科组打的是真激烈&#xff0c;初出茅庐的小后生没见过这场面QAQ~ D0n’t pl4y g4m3!!! 简单记录一下&#xff0c;实际做题踩坑很多&#xff0c;尝试很多。 先扫了个目录&#xff0c;扫出start.sh 内容如下…...

Matlab——二维绘图(最为详细,附上相关实例)

为了帮助各位同学备战数学建模和学习Matlab的使用&#xff0c;今天我们来聊一聊 Matlab 中的绘图技巧吧&#xff01;对于 Matlab 这样的科学计算软件来说&#xff0c;绘图是非常重要的一项功能。在数据处理和分析时&#xff0c;良好的绘图技巧能够更直观地呈现数据&#xff0c;…...

JVM学习(四)--内存问题分析思路

linux获取jvm当前dump文件 命令行为&#xff1a;jmap -dump:file[文件名] [pid] 然后等待生成dump文件&#xff0c;生成的dump文件就在当前目录下。如下图&#xff1a; 然后就可以下载到本地&#xff0c;用本地jdk里自带的jvisualvm来解析文件。 在用本地的jvisualvm解析之前…...

【MySQL】七种SQL优化方式 你知道几条

1.插入数据 1.1insert 如果我们需要一次性往数据库表中插入多条记录&#xff0c;可以从以下三个方面进行优化。 insert into tb_test values(1,tom); insert into tb_test values(2,cat); insert into tb_test values(3,jerry); 1). 优化方案一 批量插入数据 Insert into t…...

MySQL8.xx 解决1251 client does not support ..解决方案

MySQL8.0.30一主两从复制与配置(一)_蜗牛杨哥的博客-CSDN博客 MySQL8.xx一主两从复制安装与配置 MySQL8.XX随未生成随机密码解决方案 一、客户端连接mysql&#xff0c;问题&#xff1a;1251 client does not support ... 二、解决 1.查看用户信息 备注&#xff1a;host为 % …...

SpringBoot常用的简化开发注解

一、引言 在Spring Boot框架中&#xff0c;有许多常用的注解可用于开发项目。下面是其中一些常见的注解及其功能和属性的说明&#xff1a; 1、RestController RestController 是 Spring Framework 中的一个注解&#xff0c;用于标识一个类是 RESTful 服务的控制器。它结合了…...

python相关

1、更改用户名之后&#xff0c;C盘下的文件夹下名称没有改&#xff1f;这样设置 https://blog.csdn.net/qq_56088882/article/details/127470766 2、安装python和pycharm 链接 3、vscod中import requests出错&#xff1a;亲测有效&#xff1a; 链接...

C语言的类型转换

C语言的类型转换很重要&#xff0c;经常出现&#xff0c;但是往往不被人注意&#xff0c;而在汇编代码当中就暴露无遗了。 如下列代码&#xff1a; char ch; while ((ch getchar()) ! #) putchar(ch); 反汇编后&#xff1a; .text:00401006 mov…...

从零构建深度学习推理框架-11 Resnet

op和layer结构 在runtime_ir.cpp中&#xff0c;我们上一节只构建了input和output&#xff0c;对于中间layer的具体实现一直没有完成&#xff1a; for (const auto& kOperator : this->operators_) {if (kOperator->type "pnnx.Input") {this->input_o…...

多线程练习-顺序打印

wait和notify的使用推荐看通过wait和notify来协调线程执行顺序 题目 有三个线程&#xff0c;线程名称分别为&#xff1a;a&#xff0c;b&#xff0c;c。 每个线程打印自己的名称。 需要让他们同时启动&#xff0c;并按 c&#xff0c;b&#xff0c;a的顺序打印 代码及其注释…...

一文读懂MQTT各参数定义(非ChatGPT生成版)

文章目录 前言主流使用MQTT协议的云平台连接参数连接参数详解1.服务器地址&#xff08;Server Address&#xff09;2.端口&#xff08;Port&#xff09;3.客户端标识符&#xff08;Client Identifier&#xff09;4.用户名和密码&#xff08;Username and Password&#xff09;5…...

redis-lua脚本-无参-比较2个数值

以下是演变的过程&#xff1a; eval " return haha " 0 eval " local res haha; return res; " 0 eval " local value1 redis.call(get,value1); local value2 redis.call(get,value2);return value1; " 0 eval " return 1 < 2;…...

Lesson5-1:OpenCV视频操作---视频读写

学习目标 掌握读取视频文件&#xff0c;显示视频&#xff0c;保存视频文件的方法 1 从文件中读取视频并播放 在OpenCV中我们要获取一个视频&#xff0c;需要创建一个VideoCapture对象&#xff0c;指定你要读取的视频文件&#xff1a; 创建读取视频的对象 cap cv.VideoCapt…...

Lesson5-2:OpenCV视频操作---视频追踪

学习目标 理解meanshift的原理知道camshift算法能够使用meanshift和Camshift进行目标追踪 1.meanshift 1.1原理 m e a n s h i f t meanshift meanshift算法的原理很简单。假设你有一堆点集&#xff0c;还有一个小的窗口&#xff0c;这个窗口可能是圆形的&#xff0c;现在你可…...

Buzz音频转录完全指南:3大核心功能+5个实战场景,快速掌握本地语音转文字技术

Buzz音频转录完全指南&#xff1a;3大核心功能5个实战场景&#xff0c;快速掌握本地语音转文字技术 【免费下载链接】buzz Buzz transcribes and translates audio offline on your personal computer. Powered by OpenAIs Whisper. 项目地址: https://gitcode.com/GitHub_Tr…...

从电磁炉到户外电源:拆解单相SVPWM如何让你的逆变器更安静、更高效

从电磁炉到户外电源&#xff1a;单相SVPWM如何实现静音与高效的双重突破当你深夜用电磁炉煮面时&#xff0c;是否曾被突然的蜂鸣声吓一跳&#xff1f;或是发现户外电源给设备充电时&#xff0c;散热风扇的噪音盖过了山林鸟鸣&#xff1f;这些常见问题背后&#xff0c;隐藏着一个…...

[智能体-69]:重新认知MCP:协议不生产智能,只是AI全域交互的标准化基石

MCP只是提供了大模型、编排调度、外部工具能够进行结构化交流的标准&#xff0c;而整个系统的智能主要依赖编排调度&#xff0c;与外部软件系统的交互取决于外部工具&#xff0c;包括外部语音交互、视觉交互、数字化交互。当下MCP&#xff08;Model Context Protocol&#xff0…...

ARM PMU性能监控单元原理与实践指南

1. ARM PMU性能监控单元概述性能监控单元&#xff08;PMU&#xff09;是现代ARM处理器中用于硬件级性能分析的核心组件。它通过一组可编程的硬件计数器&#xff0c;实现对处理器内部各种关键事件的精确测量。这些事件涵盖了从指令执行、缓存访问到内存子系统行为等处理器活动的…...

【DeepSeek开源协议识别权威指南】:20年合规专家亲授3大协议陷阱与5步精准识别法

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek开源协议识别的底层逻辑与合规价值 DeepSeek系列模型&#xff08;如DeepSeek-V2、DeepSeek-Coder&#xff09;虽以“开源”名义发布&#xff0c;但其实际许可状态需通过结构化协议解析才能准确…...

SMUDebugTool终极指南:如何深度掌控AMD Ryzen处理器的隐藏性能

SMUDebugTool终极指南&#xff1a;如何深度掌控AMD Ryzen处理器的隐藏性能 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: ht…...

告别元素变动导致的报错:探索自动化测试脚本的 AI“自愈”能力

前言:一个所有测试人都经历过的噩梦 周三晚上十一点,CI/CD流水线再次亮起红灯。 你打开日志,满屏的NoSuchElementException扑面而来。仔细一看——前端团队在昨天的版本中重构了登录页面的DOM结构,原本的#login-btn变成了#signin-button-v2,30个测试用例因此全军覆没。 …...

淘宝淘金币自动化脚本终极指南:如何每天节省25分钟实现智能任务管理

淘宝淘金币自动化脚本终极指南&#xff1a;如何每天节省25分钟实现智能任务管理 【免费下载链接】taojinbi 淘宝淘金币自动执行脚本&#xff0c;包含蚂蚁森林收取能量&#xff0c;芭芭农场全任务&#xff0c;解放你的双手 项目地址: https://gitcode.com/gh_mirrors/ta/taoji…...

通用物联网开发板设计:基于ESP8266的硬件集成与开发实践

1. 项目概述&#xff1a;为什么我们需要一块“通用”的物联网开发板&#xff1f;在捣鼓了几年物联网项目之后&#xff0c;我发现自己桌面上堆满了各种开发板&#xff1a;ESP8266、ESP32、Arduino Uno、STM32 Nucleo……每个项目都要重新连线、配置电源、焊接传感器接口&#xf…...

如何深度定制索尼相机:Sony-PMCA-RE逆向工程工具完整指南

如何深度定制索尼相机&#xff1a;Sony-PMCA-RE逆向工程工具完整指南 【免费下载链接】Sony-PMCA-RE Reverse Engineering Sony Digital Cameras 项目地址: https://gitcode.com/gh_mirrors/so/Sony-PMCA-RE 索尼相机逆向工程工具Sony-PMCA-RE是一款专业的开源工具&…...