【Vue2】Axios、Async+Await、解构赋值
Axios入门使用，Async和Await用法，解构赋值语法
<!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>
<script src="./../lib/vue.js"></script>
<script src="./../lib/axios.min.js"></script>
</head>
<body>
<!-- 在后面的Vue|、
React课程中都会用到axios来请求数据。
中文官网地址: http://www.axios-js.com/
英文官网地址: https://www.npmjs.com/package/axios
--> <button id="postBtn">postBtn</button>
<button id="postBtn2">postBtn2</button>
<button id="postBtn3">postBtn3</button> <script> // result对象是 Promise返回的
// const result = axios({
// method: 'GET',
// url: 'http://www.liulongbin.top:3006/api/getbooks'
// })
// result.then(res => {
// console.log(res.data)
// }) // AXIOS GET请求传参
// const result2 = axios({
// method: 'GET',
// url: 'http://www.liulongbin.top:3006/api/getbooks',
// params: { // url传参
// aaa: 100,
// vvv: 'sdas'
// }
// })
// result2.then(res => {
// console.log(res.data)
// }) let postBtn = document.querySelector('#postBtn')
postBtn.addEventListener('click', function (event) {
const result2 = axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
params: { // url传参 post请求也能传递
aaa: 100,
vvv: 'sdas'
},
data: {
name: 'zs',
age: 20
}
})
result2.then(res => {
console.log(res.data)
})
}) // 如果返回值是Promise对象，可以使用async + await简化代码块
let postBtn2 = document.querySelector('#postBtn2')
postBtn2.addEventListener('click', async function (event) {
const result2 = await axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
params: { // url传参 post请求也能传递
aaa: 100,
vvv: 'sdas'
},
data: { // 请求体传参 在GET请求中并不会携带....
name: 'zs',
age: 20
}
})
console.log(result2)
}) // 获取一部分属性对象 可以使用解构语法
let postBtn3 = document.querySelector('#postBtn3')
postBtn3.addEventListener('click', async function (event) {
/**
* 可以结构重命名
* data: res 将data属性更名为res
*
* 解决 data.data的问题
*/
const { config, data: res, headers, request, status, statusText } = await axios({
method: 'GET',
url: 'http://www.liulongbin.top:3006/api/getbooks'
})
console.log(res.data)
}) </script>
</body>
</html>
Axios的Post请求和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>
<script src="./../lib/vue.js"></script>
<script src="./../lib/axios.min.js"></script>
</head>
<body>
<!-- 在后面的Vue|、
React课程中都会用到axios来请求数据。
中文官网地址: http://www.axios-js.com/
英文官网地址: https://www.npmjs.com/package/axios
-->
<button id="getBtn">GET-BTN</button>
<button id="postBtn">POST-BTN</button> <script>
document
.querySelector('#getBtn')
.addEventListener('click', async function(event) {
// 无参GET
// const { data: result } = await axios.get('http://www.liulongbin.top:3006/api/getbooks')
// console.log(result) // url带参GET
const { data: result } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
params: { id: 1 }
})
console.log(result)
})
document
.querySelector('#postBtn')
.addEventListener('click', async function(event) {
// url带参POST 对象直接是请求体
const { data: result } = await axios.post('http://www.liulongbin.top:3006/api/post', {
asdas : false
})
console.log(result)
})
</script>
</body>
</html>
【Vue2】Axios、Async+Await、解构赋值的更多相关文章
- 简单的axios请求返回数据解构赋值
本地 data.json 文件 { "name": "大熊", "age": 18, "fnc": [ 1, 2, 3 ...
- ES6--let,解构赋值,promise && ES7--async
ES-->IE10.Google.火狐 ES6 let 声明的关键字 不能重复声明 块级作用域 <input type="button" value="1&q ...
- 变量的解构赋值////////////z
变量的解构赋值 数组的解构赋值 对象的解构赋值 字符串的解构赋值 数值和布尔值的解构赋值 函数参数的解构赋值 圆括号问题 用途 数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值, ...
- JavaScript学习笔记 -- ES6学习(三) 变量的解构赋值
1.解构赋值的定义 在ES6中,允许按照一定模式,从数组和对象中提取值(所谓解构),然后对变量进行赋值. var a = 1; var b = 2; var c = 3; //等价于 var [a, ...
- ES 6 : 变量的解构赋值
1. 数组的解构赋值 [ 基本用法 ] 按照一定的模式从数组或者对象中取值,对变量进行赋值的过程称为解构. 以前,为变量赋值只能直接指定值: 而ES 6 允许写成下面这样: 上面的代码表示,可以从数组 ...
- ECMAScript 6入门 - 变量的解构赋值
定义 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构赋值不仅适用于var命令,也适用于let和const命令. 解构赋值的规则是,只要 ...
- ECMAScript 6之变量的解构赋值
1,数组的解构赋值 基本用法 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. var a = 1; va ...
- ES6学习笔记（let,const,变量的解构赋值）
1.let: ; i < 3; i++) { let i = 'abc'; console.log(i); } // abc // abc // abc 不存在变量提升,它所声明的变量一定要在声 ...
- es6的解构赋值用途
(1)交换变量的值 let x = 1; let y = 2; [x, y] = [y, x]; 上面代码交换变量x和y的值,这样的写法不仅简洁,而且易读,语义非常清晰. (2)从函数返回多个值 函数 ...
- ES6学习之 解构赋值
最近看了一个vue的项目,发现作者大量使用了ES6的语法,包括async, Promise, Set, Map还有一些解构赋值, 才发现自己对于ES6的语法缺乏了总结和运用,看得有点艰难,所以重新学习 ...
随机推荐
- 解决TrueNAS中Smb共享文件路径不区分大小写的问题
问题 在Truenas中, 默认的smb文件分享中, 文件夹是不区分大小写的. 这在一些情况下会导致无法重命名等问题, 严重时可能会造成拷贝文件时的全文件夹文件丢失. 这是linux下的情况, 在已存 ...
- 开源的Datadog？可观测性平台SigNoz是否名副其实？
SigNoz号称自己是开源领域的Datadog,基于OpenTelemetry做了一套可观测性方案.夜莺从V6版本开始,也希望做全栈可观测性方案,巧了,大家目标一致,今天我们一起来对SigNoz做个初 ...
- K-means聚类是一种非常流行的聚类算法
K-means聚类是一种非常流行的聚类算法,它的目标是将n个样本划分到k个簇中,使得每个样本属于与其最近的均值(即簇中心)对应的簇,从而使得簇内的方差最小化.K-means聚类算法简单.易于实现,并且 ...
- Vim的移动大法
Vim的移动大法 移动光标的按键 "h" 向左移动 "j"向下移动 "k"向上移动 "l"向右移动 在单词之间移动 注: ...
- .NET 个人博客-给文章添加上标签
个人博客-给文章添加上标签 优化计划 置顶3个且可滚动或切换 推荐改为4个,然后新增历史文章,将推荐的加载更多放入历史文章,按文章发布时间降序排列. 标签功能,可以为文章贴上标签 推荐点赞功能 本篇文 ...
- 【基础计算】ESDF栅格距离图计算并行加速版
前言与参考 这一部分仅为路径规划源码及论文GPIR的一个小部分,但是有代码实现,第一次看的时候有些懵,所以特此记录:主要是设置好了栅格地图后,添加了障碍物后,对其的欧式距离计算和梯度计算等.原代码中为 ...
- nn.Conv2d()中dilation参数的作用
nn.Conv2d()中dilation参数的作用 下面这张图很好的描述了这个参数的作用 优点: 这样每次进行单次计算时覆盖的面积(感受域)增大,最开始时3*3 = 9 然后是5*5 = 25最后是7 ...
- [UG 二次开发 PYTHON] 添加螺纹规格
NX 1988 系列 在添加螺纹特征时,不能自定义螺纹规格, 从网上找到的资料上讲,改一个XML文件,在文件中添加自定义的螺纹规格,从而实现需要的效果. 自己写了一个小程序,方便手动添加螺纹规格. 效 ...
- SpringBoot Maven查看依赖树
dependency:tree -f pom.xml
- c# 对DataTable数据筛选后进行修改操作
记录一次对DataTable中的数据筛选去重后,然后对数据进行修改! foreach (DataRow dr in dt.Rows) // 便利dt { if (StringUtil.isNotNul ...