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

Axios使用方式

news 2025/11/25 10:27:47

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">…...

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

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

以下是一些常见的用法示例&#xff1a; plus() 函数将两个数组合并成一个数组。plus() 函数是 Kotlin 标准库中的一个扩展函数&#xff0c;可以用于合并两个同类型的数组。 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

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

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

3、MSF使用

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

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

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

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

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

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

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

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

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

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

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

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

1.下载最新的Connector https://dev.mysql.com/downloads/connector/cpp/&#xff0c;下载带debug的库。 解压缩到本地&#xff0c;本次使用的是带debug模式的connector库&#xff1a; 注&#xff1a;其中mysqlcppconn与mysqlcppconn8的区别是&#xff1a; 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的时间复杂度&#xff1f;例6 计算阶乘递归factorial的时间复杂度&#xff1f;…...

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

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

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

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

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

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

编程日记 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.单词拆分 题目链接&#xff1a;139. 单词拆分 不要求字典中的单词全部使用&#xff0c;但是要求拆分的单词拆分成的每一个子串都是字典中的单词。 &#xff08;1&#xff09;dp[ i ] 表示前 i 个字符组成…...

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

opencv-Canny 边缘检测

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

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

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

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

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

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

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

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

点云 surface 方法总结

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

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

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

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; Linux系统理论 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言&#x1f324;️文件的组成☁️文件属性☁️文件内容☁️注意事项 &#x1f324;️路…...

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

梯度详解与优化实战

什么是梯度 对所有自变量求偏微分构成的向量&#xff0c;它是一个向量&#xff08;有大小和函数值增长方向&#xff09; 导数是一个标量 找最小值点坐标的案例 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 中&#xff0c;osgText提供了向场景中添加文字的强大功能&#xff0c;由于有第三方插件 FreeType 的支持&#xff0c;它完全支持TrueType 字体。很多人可能对 FreeType 和 TrueType 还不太了解&#xff0c…...

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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言 现在我们有个如下的需求&#xff0c;设计一个邮件发奖的小系统&#xff0c; 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其…...

编程新知 2025/11/20 1:57:54

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2025/11/17 3:11:58

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/11/16 21:56:02

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/10/4 1:16:44

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/11/21 4:05:48

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/7/20 6:08:51

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

编程新知 2025/11/25 10:04:35

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中&#xff0c;如何展示好看的实验结果图像非常重要&#xff01;&#xff01;&#xff01; 1、灰度原始图像 灰度图像每个像素点只有一个数值&#xff0c;代表该点的​​亮度&#xff08;或…...

编程新知 2025/11/22 8:05:25