Axios使用方式
ajax是JQUERY封装的XMLHttprequest用来发送http请求
Axios简单点说它就是一个js库,支持ajax请求,发送axios请求功能更加丰富,丰富在哪不知道
1.npm使用方式
vue项目中 npm install axios
2.cdn方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
3.使用本地文件
<script src="js/axios.min.js"></script>
axios 带有拦截器功能:分别是请求拦截器 应答拦截器(就是响应拦截器)
第三种方式需要将axios文件下载到本地,下载方式
GITHUB上下载 地址 GitHub - axios/axios: Promise based HTTP client for the browser and node.js
在 GitHub 仓库页面，点击 "Code" 按钮，然后选择 "Download ZIP" 以下载包含所有文件的压缩文件。
解压下载的 ZIP 文件。
在解压后的文件夹中，你可以在 dist 文件夹中找到 axios.min.js 文件。
解压后点进去dist 文件夹中找到 axios.min.js 文件。
下面用VsCode练习下axios
1.GET无参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入axios -->
<script src="js/axios.min.js"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
</head>
<body>
<button οnclick="fn1()">使用axios发送get请求,无参数</button>
<script>
//get无参请求 axios格式: axios.get(url).then().catch().finally()
function fn1(){
var url="http://localhost:8000/api/v1/product/index";
axios.get(url).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
}).finally(()=>{
console.log("一定执行的代码")
})
}
</script>
</body>
</html>
这是因为跨域问题
2.GET请求带参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入axios -->
<script src="js/axios.min.js"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
</head>
<body>
<button οnclick="fn1()">使用axios发送get请求,无参数</button>
<button οnclick="fn2()">使用axios发送get请求,带参数</button>
<script>
//get无参请求 axios格式: axios.get(url).then().catch().finally()
function fn1(){
var url="http://localhost:8000/api/v1/product/list";
axios.get(url).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
}).finally(()=>{
console.log("一定执行的代码")
})
}
function fn2(){
var pType=1;
var pageNum=1;
var pageSize=3;
var url="http://localhost:8000/api/v1/product/list?pType="+pType+"&pageNum="+pageNum+"&pageSize="+pageSize;
axios.get(url).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
}).finally(()=>{
console.log("一定执行的代码")
})
}
</script>
</body>
</html>
上面这样是传统传参方式
axios使用配置项目params
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入axios -->
<script src="js/axios.min.js"></script>
<!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
</head>
<body>
<button οnclick="fn1()">使用axios发送get请求,无参数</button>
<button οnclick="fn2()">使用axios发送get请求,带参数</button>
<button οnclick="fn3()">使用axios发送get请求,带参数,使用axios配置项方式</button>
<script>
//get无参请求 axios格式: axios.get(url).then().catch().finally()
function fn1(){
var url="http://localhost:8000/api/v1/product/list";
axios.get(url).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
}).finally(()=>{
console.log("一定执行的代码")
})
}
function fn2(){
var pType=1;
var pageNum=1;
var pageSize=3;
var url="http://localhost:8000/api/v1/product/list?pType="+pType+"&pageNum="+pageNum+"&pageSize="+pageSize;
axios.get(url).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
}).finally(()=>{
console.log("一定执行的代码")
})
}
function fn3(){
var pType=1;
var pageNum=1;
var pageSize=3;
var url="http://localhost:8000/api/v1/product/list";
axios.get(url,{
params:{
pType:pType,
pageNum:pageNum,
pageSize:pageSize
}
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
}).finally(()=>{
console.log("一定执行的代码")
})
}
</script>
</body>
</html>
params是一个{}对象
那么也可以
var data={
xxx:xxx
yyy:yyy
}
然后里面
params:data 即可
例如
Axios发送POST请求
后端接收可以是单个接收 也可以是实体类
用AXIOS发送Post请求 application/json
后端接收
这个请求会发送预请求 实际上是两个请求
预请求
AXIOS也可以像ajax那样配置项的方式发送请求
下面两种方式使用POST PUT PATCH
这种方式默认Content-Type是application/json
AXIOS的返回值
AXIOS的拦截器
拦截器分两种,分别是
请求拦截器:在发起请求之前执行,可以对请求内容做修改,比如增加参数,设置请求头等等
应答拦截器(相应拦截器):服务器返回结果,AXIOS的then之前先执行,可以对应答内容做处理
请求拦截器写法
axios.interceptors.request.use(function(xxx){ 记得return xxx},function(yyy) {如果错误做错误处理});
响应拦截器
AXIOS进行全局默认配置
相关文章：
Axios使用方式
ajax是JQUERY封装的XMLHttprequest用来发送http请求 Axios简单点说它就是一个js库,支持ajax请求,发送axios请求功能更加丰富,丰富在哪不知道 1.npm使用方式 vue项目中 npm install axios 2.cdn方式 <script src"https://unpkg.com/axios/dist/axios.min.js">…...
kotlin 内置函数对数组进行各种操作
以下是一些常见的用法示例： plus() 函数将两个数组合并成一个数组。plus() 函数是 Kotlin 标准库中的一个扩展函数，可以用于合并两个同类型的数组。 fun main() {val array1 arrayOf(1, 2, 3)val array2 arrayOf(4, 5, 6)val mergedArray array1.plu…...
力扣labuladong——一刷day54
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、力扣1660. 纠正二叉树二、力扣100. 相同的树三、力扣572. 另一棵树的子树四、力扣101. 对称二叉树 前言 判断树是否相等，就直接遍历就可以。判断…...
3、MSF使用
文章目录 一、利用ms17-010漏洞对靶机执行溢出攻击二、后渗透模块meterpreter的使用 一、利用ms17-010漏洞对靶机执行溢出攻击 分别输入以下命令，使用ms17_010_eternalblue模块对目标机的ms17-010漏洞进行利用： use exploit/windows/smb/ms17_010_eter…...
34970A 数据采集 / 数据记录仪开关单元
34970A 数据采集 / 数据记录仪开关单元 产品综述： Keysight 34970A 数据采集/数据记录仪开关单元由一个 3 插槽主机和一个内置的 6 1/2 位数字万用表组成。每个通道可以单独配置，以测量 11 种不同功能之一，这样既不会增加成本，也…...
BUUCTF刷题之路-web-[GXYCTF2019]Ping Ping Ping1
启动环境后，是一个简简单单的页面： 看样子是能够触发远程执行漏洞的。尝试下ping 127.0.0.1，如果有回显说明我们的想法是对的。 最近才学习的nc反弹shell。想着是否能用nc反弹shell的办法。控制服务器然后输出flag呢？于是我测试下…...
一、深入简出串口(USRT)通信——基本概念。
一、前言 串口到底是什么？简单来说一句话就可以解释，串口就是一种通信协议。 看到这里可能大家会觉得你这不是放屁么，说了跟没说一样。所以这里做前言来描述，大家要先对通信协议有一个下意识地认识才能在学习串口的时候不至于迷茫…...
采用connector-c++ 8.0操作数据库
1.下载最新的Connector https://dev.mysql.com/downloads/connector/cpp/，下载带debug的库。 解压缩到本地，本次使用的是带debug模式的connector库： 注：其中mysqlcppconn与mysqlcppconn8的区别是： 2.在cmakelist…...
【Java数据结构 -- 时间和空间复杂度】
时间和空间复杂度 1. 算法效率2. 时间复杂度2.1 时间复杂度的概念2.2 大O的渐进表示法2.3 推导大O阶方法2.4 常见时间复杂度计算举例例1例2例3例4 计算 bubbleSort的时间复杂度例5 计算binarySearch的时间复杂度？例6 计算阶乘递归factorial的时间复杂度？…...
【每日一题】1457. 二叉树中的伪回文路径-2023.11.25
题目： 1457. 二叉树中的伪回文路径 给你一棵二叉树，每个节点的值为 1 到 9 。我们称二叉树中的一条路径是 「伪回文」的，当它满足：路径经过的所有节点值的排列中，存在一个回文序列。 请你返回从根到叶子节点的所有路…...
能让PDF看起来像是扫描件的Look Scanned
什么是 Look Scanned ? Look Scanned 是一个能够让 PDF 看起来就像是扫描件一样的纯前端网站。你再也不需要麻烦地打印之后扫描了，你所需要的就是鼠标点几下。 这是个挺有意思的软件，但是老苏不确定什么场景下会用到这个软件，如果不想自己搭…...
RT-DETR 更换损失函数之 SIoU / EIoU / WIoU / Focal_xIoU
文章目录 更换方式CIoUDIoUEIoUGIoUSIoUWIoUFocal_CIoUFocal_DIoUFocal_EIoUFocal_GIoUFocal_SIoU提示更换方式 第一步：将ultralytics/ultralytics/utils/metrics.py文件中的bbox_iou替换为如下的代码：class...
代码随想录算法训练营第四十六天 | 139.单词拆分，多重背包，背包问题总结
目录 139.单词拆分 多重背包 背包问题总结 01背包 完全背包 多重背包 139.单词拆分 题目链接：139. 单词拆分 不要求字典中的单词全部使用，但是要求拆分的单词拆分成的每一个子串都是字典中的单词。 （1）dp[ i ] 表示前 i 个字符组成…...
opencv-Canny 边缘检测
Canny边缘检测是一种经典的图像边缘检测算法，它在图像中找到强度梯度的变化，从而识别出图像中的边缘。Canny边缘检测的优点包括高灵敏度和低误检率。 在OpenCV中，cv2.Canny() 函数用于执行Canny边缘检测。 基本语法如下： edges…...
案例023:基于微信小程序的童装商城的设计与实现
文末获取源码 开发语言：Java 框架：SSM JDK版本：JDK1.8 数据库：mysql 5.7 开发软件：eclipse/myeclipse/idea Maven包：Maven3.5.4 小程序框架：uniapp 小程序开发软件：HBuilder X 小程序…...
Ansible的循环：loop，with_＜lookup＞和until
环境 管理节点：Ubuntu 22.04控制节点：CentOS 8Ansible：2.15.6 循环的方法 loopwith_<lookup>until 用这几种方式都可以实现循环。其中， loop 是推荐的用法，在很多时候能够替换 with_<lookup> 。 loop…...
点云 surface 方法总结
点云的表面方法是指通过点云数据来估计和重建物体或场景的表面几何形状。下面总结了几种常见的点云表面方法： 三角化：三角化是最常用的点云表面重建方法之一。它将点云中的点连接成三角形网格，从而重建出物体或场景的表面。常见的三角化算法…...
深入探索Linux文件系统：属性、路径与隐藏之谜
🎥 屿小夏 ： 个人主页 🔥个人专栏 ： Linux系统理论 🌄 莫道桑榆晚，为霞尚满天！ 文章目录 📑前言🌤️文件的组成☁️文件属性☁️文件内容☁️注意事项 🌤️路…...
梯度详解与优化实战
什么是梯度 对所有自变量求偏微分构成的向量，它是一个向量（有大小和函数值增长方向） 导数是一个标量 找最小值点坐标的案例 import torchimport numpy as np import matplotlib.pyplot as plt def himmelblau(x):return (x[0]**2x[1]-11)…...
OSG编程指南＜十二＞：OSG二三维文字创建及文字特效
1、字体基础知识 适当的文字信息对于显示场景信息是非常重要的。在 OSG 中，osgText提供了向场景中添加文字的强大功能，由于有第三方插件 FreeType 的支持，它完全支持TrueType 字体。很多人可能对 FreeType 和 TrueType 还不太了解，…...
龙虎榜——20250610
上证指数放量收阴线，个股多数下跌，盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型，指数短线有调整的需求，大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的：御银股份、雄帝科技 驱动…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）
HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
【Oracle APEX开发小技巧12】
有如下需求： 有一个问题反馈页面，要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据，方便管理员及时处理反馈。 我的方法：直接将逻辑写在SQL中，这样可以直接在页面展示 完整代码： SELECTSF.FE…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model：绑定右侧列表的值&…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣（LeetCode） 思路： 笔者写过很多次这道题了，不想写题解了，大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
【HTTP三个基础问题】
面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后，迭代器会失效，因为顺序迭代器在内存中是连续存储的，元素删除后，后续元素会前移。 但一些场景中，我们又需要在执行删除操作…...
抽象类和接口（全）
一、抽象类 1.概念：如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象，这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法，包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中，⼀个类如果被 abs…...