【网络请求之Axios】axios的基础用法
2024-06-30 13:52:42
1. axios概述
- axios 是一个专注于网络请求的库。
- axios 在请求到数据之后，在真正的数据之外，套了一层外壳。
2.axios的基本使用
2.1 发送get请求
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button id="btnGet">发送GET请求</button><button id="btnPost">发送POST请求</button><!-- 引入axios --><script src="/lib/axios.js"></script><script>document.querySelector("#btnGet").addEventListener("click", function () {axios({// 请求方式method: "GET",// 请求地址url: "http://www.liulongbin.top:3006/api/getbooks",// URL中的查询参数params: {id: 2,},}).then(function(result) {console.log(result);})});</script></body>
</html>结果：
2.2 发送post请求
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button id="btnPost">发送POST请求</button><!-- 引入axios --><script src="/lib/axios.js"></script><script>document.querySelector('#btnPost').addEventListener('click', function() {axios({method: 'POST',url: 'http://www.liulongbin.top:3006/api/post',// 请求体参数data: {name: 'zs',age: 12,}}).then(function(result) {console.log(result);})})</script></body>
</html>结果：
3. 使用async…await、解构赋值对代码进行改造
3.1 为什么可以要使用async/await？
结果：
axios的返回值是一个Promise类型。
3.2 以发送post请求为例
代码：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button id="btnPost">发送POST请求</button><!-- 引入axios --><script src="/lib/axios.js"></script><script>document.querySelector("#btnPost").addEventListener("click", async function () {// 解构赋值的时候，使用 : 进行重命名// 1. 调用 axios 之后，使用 async/await 进行简化// 2. 使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来// 3. 把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }const { data: res } = await axios({method: "POST",url: "http://www.liulongbin.top:3006/api/post",// 请求体参数data: {name: "zs",age: 12,},});console.log(res);});</script></body>
</html>结果：
4.使用axios直接发送请求
4.1 使用axios直接发送get请求
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button id="btnGet">发送GET请求</button><button id="btnPost">发送POST请求</button><!-- 引入axios --><script src="/lib/axios.js"></script><script>document.querySelector("#btnGet").addEventListener("click", async function () {const { data: res } = await axios.get("http://www.liulongbin.top:3006/api/getbooks",{params: {id: 3,},});console.log(res.data);});</script></body>
</html>结果：
4.2 使用axios直接发送post请求
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><button id="btnPost">发送POST请求</button><!-- 引入axios --><script src="/lib/axios.js"></script><script>document.querySelector("#btnPost").addEventListener("click", async function () {const { data: res } = await axios.post("http://www.liulongbin.top:3006/api/post",{ name: "zs", age: 20 });console.log(res);});</script></body>
</html>注意：这里的请求体参数可以直接写在{}中，而不用加data
结果：
5. 参考
黑马vue视频，感谢llb老师。
建议学习axios之前先了解一下http协议。
【网络请求之Axios】axios的基础用法相关推荐
- vue如何发送网络请求，使用axios事半功倍！
目录 一.axios使用 1.支持多种请求方式: 2.安装 3.简单使用实例 4.发送并发请求 5.全局配置 二.axios的实例 1.为什么要创建 axios的实例呢? 2.使用 三..axios模 ...
- vue基于promise可以用于浏览器和node.js的网络请求库【axios封装-收藏版】
- 网络仿真工具Mahimahi的安装和基础用法
目录 简介 安装 源码安装 apt-get安装 运行 切换拥塞控制算法 简介 Mahimahi是一个网络仿真工具,在Linux容器内外构建一条虚拟管道,并在这个管道中模拟网络时延.丢包和带宽变化.具体 ...
- android post请求_Vue 网络请求框架 axios 使用教程
点击上方"代码集中营",设为星标 优秀文章,第一时间送达! 前期回顾 1. Vue 学习入门指南 2. Vue 入门环境搭建 3. Visual Studio Code 使用指南 ...
- vue 获取url地址的参数_Vue 网络请求框架 axios 使用教程
点击上方"代码集中营",设为星标 优秀文章,第一时间送达! 前期回顾 1. Vue 学习入门指南 2. Vue 入门环境搭建 3. Visual Studio Code 使用指南 ...
- react native 网络请求 axios
react native的网络请求推荐使用axios和fetch 两种方式,当前阐述的是axios 1.安装axios yarn add react-native-axios 2.创建一个js,进行基 ...
- axios发送网络请求
网络模块封装 选择什么网络模块 传统的Ajax 缺点:配置和调用方式等非常混乱 jQuery-Ajax 缺点:在Vue整个开发中都是不需要使用jQuery的 axios axios 功能特点: 在浏览 ...
- Flutter开发之Http网络请求
简介 Http网络请求是一门开发语言里比较常用和重要的功能,主要用于资源访问.接口数据请求和提交.上传下载文件等等操作,Http请求方式主要有:GET.POST.HEAD.PUT.DELETE.TRA ...
- ajax jq 图片上传请求头_全面分析前端的网络请求方式:Ajax ,jQuery ,axios,fetch
链接:https://juejin.im/post/5c9ac607f265da6103588b31 一.前端进行网络请求的关注点 大多数情况下,在前端发起一个网络请求我们只需关注下面几点: 传入基本 ...
最新文章
- 用python实现杨辉三角的几种不同方式
- 低调的 Linux 文件系统家族
- 记录memcache分布式策略及算法
- C++函数指针和函数重载
- Oracle表空间规划处理
- nssl1469-W【dp】
- WARNING: 997: Failure to setup sound, err = -50
- 最全NFC芯片技术厂商介绍及应用介绍
- 计算机电竞方向,关于电竞专业的就业方向
- 平面设计（板式设计与构图篇）
- 管理变量、机密和事实
- 两个质数互质是_两个互质数是什么意思
- python f检验 模型拟合度_模型评估指标（RMSE、MSE、MAE、R2准确率、召回率、F1、ROC曲线、AUC曲线、PR曲线）...
- 网络共享计算机怎么连接,网络共享,详细教您电脑怎么设置共享无线网络
- hMailServer 使用教程 —— 手把手教你搭建自己的邮箱服务器
- Mac 卸载/安装 maven
- 六轴加速陀螺仪MPU6500/MPU6050使用及DMP库移植，含记步器功能
- 常见嵌入式Web服务器比较
- 奇安信可信浏览器下载地址
- Java接口性能优化万金油之缓存