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

Axios使用方式

news 2026/4/14 4:20:56

ajax是JQUERY封装的XMLHttprequest用来发送http请求

Axios简单点说它就是一个js库,支持ajax请求,发送axios请求功能更加丰富,丰富在哪不知道

1.npm使用方式

vue项目中 npm install axios

2.cdn方式

3.使用本地文件

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>



<script src="js/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>



<script src="js/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>



<script src="js/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">…...

编程日记 2023/11/26 15:50:08

kotlin 内置函数对数组进行各种操作

以下是一些常见的用法示例： plus() 函数将两个数组合并成一个数组。plus() 函数是 Kotlin 标准库中的一个扩展函数，可以用于合并两个同类型的数组。 fun main() {val array1 arrayOf(1, 2, 3)val array2 arrayOf(4, 5, 6)val mergedArray array1.plu…...

编程日记 2023/11/26 15:49:07

力扣labuladong——一刷day54

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、力扣1660. 纠正二叉树二、力扣100. 相同的树三、力扣572. 另一棵树的子树四、力扣101. 对称二叉树前言判断树是否相等，就直接遍历就可以。判断…...

编程日记 2023/11/26 15:48:06

3、MSF使用

文章目录一、利用ms17-010漏洞对靶机执行溢出攻击二、后渗透模块meterpreter的使用一、利用ms17-010漏洞对靶机执行溢出攻击分别输入以下命令，使用ms17_010_eternalblue模块对目标机的ms17-010漏洞进行利用： use exploit/windows/smb/ms17_010_eter…...

编程日记 2023/11/26 15:47:04

34970A 数据采集 / 数据记录仪开关单元

34970A 数据采集 / 数据记录仪开关单元产品综述： Keysight 34970A 数据采集/数据记录仪开关单元由一个 3 插槽主机和一个内置的 6 1/2 位数字万用表组成。每个通道可以单独配置，以测量 11 种不同功能之一，这样既不会增加成本，也…...

编程日记 2023/11/26 15:45:01

BUUCTF刷题之路-web-[GXYCTF2019]Ping Ping Ping1

启动环境后，是一个简简单单的页面： 看样子是能够触发远程执行漏洞的。尝试下ping 127.0.0.1，如果有回显说明我们的想法是对的。最近才学习的nc反弹shell。想着是否能用nc反弹shell的办法。控制服务器然后输出flag呢？于是我测试下…...

编程日记 2023/11/26 15:44:00

一、深入简出串口(USRT)通信——基本概念。

一、前言串口到底是什么？简单来说一句话就可以解释，串口就是一种通信协议。看到这里可能大家会觉得你这不是放屁么，说了跟没说一样。所以这里做前言来描述，大家要先对通信协议有一个下意识地认识才能在学习串口的时候不至于迷茫…...

编程日记 2023/11/26 15:42:58

采用connector-c++ 8.0操作数据库

1.下载最新的Connector https://dev.mysql.com/downloads/connector/cpp/，下载带debug的库。解压缩到本地，本次使用的是带debug模式的connector库： 注：其中mysqlcppconn与mysqlcppconn8的区别是： 2.在cmakelist…...

编程日记 2023/11/26 15:40:56

【Java数据结构 -- 时间和空间复杂度】

时间和空间复杂度 1. 算法效率2. 时间复杂度2.1 时间复杂度的概念2.2 大O的渐进表示法2.3 推导大O阶方法2.4 常见时间复杂度计算举例例1例2例3例4 计算 bubbleSort的时间复杂度例5 计算binarySearch的时间复杂度？例6 计算阶乘递归factorial的时间复杂度？…...

编程日记 2023/11/26 15:39:55

【每日一题】1457. 二叉树中的伪回文路径-2023.11.25

题目： 1457. 二叉树中的伪回文路径给你一棵二叉树，每个节点的值为 1 到 9 。我们称二叉树中的一条路径是「伪回文」的，当它满足：路径经过的所有节点值的排列中，存在一个回文序列。请你返回从根到叶子节点的所有路…...

编程日记 2023/11/26 15:37:53

能让PDF看起来像是扫描件的Look Scanned

什么是 Look Scanned ? Look Scanned 是一个能够让 PDF 看起来就像是扫描件一样的纯前端网站。你再也不需要麻烦地打印之后扫描了，你所需要的就是鼠标点几下。这是个挺有意思的软件，但是老苏不确定什么场景下会用到这个软件，如果不想自己搭…...

编程日记 2023/11/26 15:36:52

RT-DETR 更换损失函数之 SIoU / EIoU / WIoU / Focal_xIoU

文章目录更换方式CIoUDIoUEIoUGIoUSIoUWIoUFocal_CIoUFocal_DIoUFocal_EIoUFocal_GIoUFocal_SIoU提示更换方式第一步：将ultralytics/ultralytics/utils/metrics.py文件中的bbox_iou替换为如下的代码：class...

编程日记 2023/11/26 15:35:51

代码随想录算法训练营第四十六天 | 139.单词拆分，多重背包，背包问题总结

目录 139.单词拆分多重背包背包问题总结 01背包完全背包多重背包 139.单词拆分题目链接：139. 单词拆分不要求字典中的单词全部使用，但是要求拆分的单词拆分成的每一个子串都是字典中的单词。 （1）dp[ i ] 表示前 i 个字符组成…...

编程日记 2023/11/26 15:34:50

opencv-Canny 边缘检测

Canny边缘检测是一种经典的图像边缘检测算法，它在图像中找到强度梯度的变化，从而识别出图像中的边缘。Canny边缘检测的优点包括高灵敏度和低误检率。在OpenCV中，cv2.Canny() 函数用于执行Canny边缘检测。基本语法如下： edges…...

编程日记 2023/11/26 15:33:50

案例023:基于微信小程序的童装商城的设计与实现

文末获取源码开发语言：Java 框架：SSM JDK版本：JDK1.8 数据库：mysql 5.7 开发软件：eclipse/myeclipse/idea Maven包：Maven3.5.4 小程序框架：uniapp 小程序开发软件：HBuilder X 小程序…...

编程日记 2023/11/26 15:32:49

Ansible的循环：loop，with_＜lookup＞和until

环境管理节点：Ubuntu 22.04控制节点：CentOS 8Ansible：2.15.6 循环的方法 loopwith_<lookup>until 用这几种方式都可以实现循环。其中， loop 是推荐的用法，在很多时候能够替换 with_<lookup> 。 loop…...

编程日记 2023/11/26 15:31:48

点云 surface 方法总结

点云的表面方法是指通过点云数据来估计和重建物体或场景的表面几何形状。下面总结了几种常见的点云表面方法： 三角化：三角化是最常用的点云表面重建方法之一。它将点云中的点连接成三角形网格，从而重建出物体或场景的表面。常见的三角化算法…...

编程日记 2023/11/26 15:30:46

深入探索Linux文件系统：属性、路径与隐藏之谜

🎥 屿小夏 ： 个人主页 🔥个人专栏 ： Linux系统理论 🌄 莫道桑榆晚，为霞尚满天！ 文章目录 📑前言🌤️文件的组成☁️文件属性☁️文件内容☁️注意事项 🌤️路…...

编程日记 2023/11/26 15:29:45

梯度详解与优化实战

什么是梯度对所有自变量求偏微分构成的向量，它是一个向量（有大小和函数值增长方向） 导数是一个标量找最小值点坐标的案例 import torchimport numpy as np import matplotlib.pyplot as plt def himmelblau(x):return (x[0]**2x[1]-11)…...

编程日记 2023/11/26 15:28:44

OSG编程指南＜十二＞：OSG二三维文字创建及文字特效

1、字体基础知识适当的文字信息对于显示场景信息是非常重要的。在 OSG 中，osgText提供了向场景中添加文字的强大功能，由于有第三方插件 FreeType 的支持，它完全支持TrueType 字体。很多人可能对 FreeType 和 TrueType 还不太了解&#xff0c…...

编程日记 2023/11/26 15:27:43

深入H7内核：手把手教你为STM32H723的LWIP+FreeRTOS工程配置MPU内存区域

深入H7内核：手把手教你为STM32H723的LWIPFreeRTOS工程配置MPU内存区域在嵌入式网络开发中，STM32H7系列凭借其高性能Cortex-M7内核和丰富的外设资源成为许多项目的首选。然而，当我们将LWIP协议栈与FreeRTOS结合使用时，往往会忽视一…...

编程新知 2026/4/14 0:46:45

STM32F103+HAL库玩转SimpleFOC：手把手教你实现无刷电机速度闭环（附J-Scope波形分析）

STM32F103HAL库实战SimpleFOC：从零构建电机速度闭环系统与J-Scope波形诊断在嵌入式开发领域，无刷电机控制一直是兼具挑战性和实用性的技术热点。当传统的PID算法遇上先进的磁场定向控制(FOC)理论，再结合STM32的硬件优势，便能实现…...

编程新知 2026/4/13 23:41:42

大模型新手必看：收藏这份学习清单，轻松入门AI风口！

本文为AI大模型初学者提供了一份完整的学习清单，涵盖大模型基础认知、核心技术模块（RAG、Prompt工程、Agent开发）、开发基础能力、应用场景开发、项目落地流程及面试求职冲刺等六大模块。文章强调实践的重要性，建议新手先利用业余…...

编程新知 2026/4/13 23:31:33

无人机风速测量技术：直接与间接方法的深度解析

1. 无人机风速测量的核心逻辑风速测量对气象预报、风电场选址、建筑安全评估等领域至关重要。传统方法依赖地面气象站和测风塔，但存在空间覆盖有限、成本高昂等问题。无人机凭借灵活机动、垂直探测能力强的特点，正在成为风速测量的新利器。我参与过多…...

编程新知 2026/4/13 21:39:59

从ResNet到PoolFormer：给计算机视觉老手的‘元架构’升级指南（附timm库实战）

从ResNet到PoolFormer：给计算机视觉老手的‘元架构’升级指南（附timm库实战） 如果你已经在计算机视觉领域深耕多年，对ResNet、EfficientNet这些经典CNN架构如数家珍，那么现在可能是时候重新审视你的工具箱了。过去几年…...

编程新知 2026/4/13 21:27:49

5个核心优势深度解析：ReadCat开源小说阅读器如何重塑数字阅读体验

5个核心优势深度解析：ReadCat开源小说阅读器如何重塑数字阅读体验【免费下载链接】read-cat 一款免费、开源、简洁、纯净、无广告的小说阅读器项目地址: https://gitcode.com/gh_mirrors/re/read-cat 在数字阅读日益普及的今天，读者们面临着广告…...

编程新知 2026/4/13 21:09:03

5分钟制作启动盘：EtchDroid安卓USB镜像写入工具全攻略

5分钟制作启动盘：EtchDroid安卓USB镜像写入工具全攻略【免费下载链接】EtchDroid An application to write OS images to USB drives, on Android, no root required. 项目地址: https://gitcode.com/gh_mirrors/et/EtchDroid 当你的电脑突然无法启动&#…...

编程新知 2026/4/13 20:50:48

HC-05蓝牙模块实战：从AT指令到多设备联通的完整指南

1. HC-05蓝牙模块入门：从拆箱到AT指令配置第一次拿到HC-05蓝牙模块时，很多人会被这个小巧的蓝色电路板难住。这个只有拇指大小的模块，实际上集成了完整的蓝牙2.0EDR通信功能。我刚开始接触时也犯过不少错误，比如把TX和RX接反导致…...

编程新知 2026/4/13 20:48:47

三合一跨平台音乐播放器：VutronMusic 完整使用指南

三合一跨平台音乐播放器：VutronMusic 完整使用指南【免费下载链接】VutronMusic 高颜值的第三方网易云播放器；支持流媒体音乐，如navidrome、jellyfin、emby；支持本地音乐播放、离线歌单、逐字歌词、桌面歌词、Touch Bar歌词、Mac…...

编程新知 2026/4/13 19:54:20

终极ECAPA-TDNN说话人识别系统：从零到工业级部署的完整指南

终极ECAPA-TDNN说话人识别系统：从零到工业级部署的完整指南【免费下载链接】ECAPA-TDNN Unofficial reimplementation of ECAPA-TDNN for speaker recognition (EER0.86 for Vox1_O when train only in Vox2) 项目地址: https://gitcode.com/gh_mirrors/ec/ECAPA…...

编程新知 2026/4/13 19:31:43

相关文章：