async和await在项目中的应用
Async基础知识:
- async函数是ES7标准引入的语法,基于Generator函数实现的,也就是说是Generator函数的语法糖。什么是Generator函数?(留个坑)
- 返回值是Promise,可以使用then方法来指定下一步操作
- 使用asyn关键字表明函数是一个async函数,内部使用await关键字表明需要等待异步任务结束后才继续往下执行
- 参考资料:http://es6.ruanyifeng.com/#docs/async
为了实践async和await,我把现在在做的vue电商项目中的异步请求函数都换成了async和await方式。
1.分类页,获取分类数据
原来的代码:
vue created
created() {
this.$ajax.get('http://localhost:3000/category/').then((res) => {
const data = res.data // 成功拿到数据
// 操作省略
}).catch(function (error) {
console.log(error)
})
},
效果图:
现在,改成async和await
首先,在vue methods里定义一个async方法
methods: {
async getCategory() {
let res = await this.$ajax.get('http://localhost:3000/category/')
if (res.status === 200) {
return res.data // 成功拿到数据
}
},
}
然后呢,在vue created里调用
created() {
this.getCategory().then(res => {
const data = res // 成功拿到数据
// 操作省略
}).catch(function (error) {
console.log(error)
})
},
这样把代码流程改成了同步形式。测试了下,效果一样。
2.商品列表页,获取商品数据
效果图:
原来的代码,vue created:
created() {
this.cat_id = this.$route.query.catId
this.$ajax.get('http://localhost:3000/items', {
params: {
catId: this.cat_id
}
}).then((res) => {
console.log(res.data)
}).catch((error) => {
console.log(error)
})
},
改用async:
vue methods里:
methods: {
async getItems(catId) {
let res = await this.$ajax.get('http://localhost:3000/items', {
params: {
catId: catId
}
})
if (res.status === 200) {
return res.data
}
},
}
vue created:
created() {
this.cat_id = this.$route.query.catId
this.getItems(this.cat_id).then(res => {
this.goodsData = res
}).catch(function (error) {
console.log(error)
})
},
完成,效果一致。
我写技术博客的目的主要是整理自己做过的功能,主要是写给自己看,当然,我尽量写清楚。
若给你造成误解,我很抱歉。若给你带来帮助, 我很欣慰。
有疑问欢迎交流 扣扣:2136946914
async和await在项目中的应用的更多相关文章
- async 和 await 之异步编程的学习
async修改一个方法,表示其为异步方法.而await表示等待一个异步任务的执行.js方面,在es7中开始得以支持:而.net在c#5.0开始支持.本文章将分别简单介绍他们在js和.net中的基本用法 ...
- 在react+redux+axios项目中使用async/await
Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...
- wepy项目中使用async await
https://github.com/Tencent/wepy/wiki/wepy项目中使用async-await
- C# 中的Async 和 Await 的用法详解
众所周知C#提供Async和Await关键字来实现异步编程.在本文中,我们将共同探讨并介绍什么是Async 和 Await,以及如何在C#中使用Async 和 Await. 同样本文的内容也大多是翻译 ...
- C# 中的 Async 和 Await
这篇文章由Filip Ekberg为DNC杂志编写. 自跟随着.NET 4.5 及Visual Studio 2012的C# 5.0起,我们能够使用涉及到async和await关键字的新的异步模式.有 ...
- 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程
反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) 背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...
- ES6中async和await说明和用法
昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了. 先说一下async的用法,它作为一个 ...
- [译] C# 5.0 中的 Async 和 Await (整理中...)
C# 5.0 中的 Async 和 Await [博主]反骨仔 [本文]http://www.cnblogs.com/liqingwen/p/6069062.html 伴随着 .NET 4.5 和 V ...
- 在MVC中使用async和await的说明
首先,在mvc中如果要用纯异步请不要使用async和await,可以直接使用Task.Run. 其次,在mvc中使用async和await可以让系统开新线程处理Task的代码,同时不必等Task执行结 ...
随机推荐
- selector-item属性
今天做的项目,发现通过键盘选中一个button以后,并没有出现button样式的变化,后来发现是selector里面缺少状态配置的原因.这里就顺便把用到的属性记录了下来,方便以后使用.当然它的属性很多 ...
- Fragment-两种使用方式
这篇我们就用实例来看看我们在代码中如何使用Fragment 一:静态添加Fragment 新建一个项目,添加两个Fragment的布局文件fragment_title,fragment_content ...
- Fragment-生命周期
Fragment生命周期图 一.Fragment的几种状态: 与Activity类似,Fragment也有一下几种状态: · 活动状态:当前Fragment位于前台,可见,可获得焦点. · 暂停状态: ...
- Postman APP
http://chromecj.com/web-development/2017-12/870.html Postman 工具模拟http各种协议请求.
- Codeforces 129A-Cookies(暴力)
A. Cookies time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...
- win8用久了变得非常慢, 磁盘占用100%
完美解决方式: 直接重装win7 完美解决这个问题 在网上查了非常久也没找到有效方法, 求教
- hdoj 2122 Ice_cream’s world III【最小生成树】
Ice_cream's world III Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- mysql 造1亿条记录的单表--大数据表
读写文件 背景及木:现有数据1000w单表,为压力测试准备1亿条数据. 步骤: 1.将1000w条记录,除id外都导入到多个文件中: //DELIMITER DROP PROCEDURE if EXI ...
- JS和安卓 IOS的交互 例子式记录
(function () { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexO ...
- codeforces 1037E. Trips(倒叙)
题目传送门: 解题思路: 正着搞好像有点恶心. 反着搞. 一边删一边搞,从崩坏的地方开始,入度--. 最后dfs崩坏,更新答案. 注意要把边删掉防止重复崩坏. 代码: #include<cstd ...