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在项目中的应用的更多相关文章

  1. async 和 await 之异步编程的学习

    async修改一个方法,表示其为异步方法.而await表示等待一个异步任务的执行.js方面,在es7中开始得以支持:而.net在c#5.0开始支持.本文章将分别简单介绍他们在js和.net中的基本用法 ...

  2. 在react+redux+axios项目中使用async/await

    Async/Await Async/Await是尚未正式公布的ES7标准新特性.简而言之,就是让你以同步方法的思维编写异步代码.对于前端,异步任务代码的编写经历了 callback 到现在流行的 Pr ...

  3. wepy项目中使用async await

    https://github.com/Tencent/wepy/wiki/wepy项目中使用async-await

  4. C# 中的Async 和 Await 的用法详解

    众所周知C#提供Async和Await关键字来实现异步编程.在本文中,我们将共同探讨并介绍什么是Async 和 Await,以及如何在C#中使用Async 和 Await. 同样本文的内容也大多是翻译 ...

  5. C# 中的 Async 和 Await

    这篇文章由Filip Ekberg为DNC杂志编写. 自跟随着.NET 4.5 及Visual Studio 2012的C# 5.0起,我们能够使用涉及到async和await关键字的新的异步模式.有 ...

  6. 反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑) C#中缓存的使用 C#操作redis WPF 控件库——可拖动选项卡的TabControl 【Bootstrap系列】详解Bootstrap-table AutoFac event 和delegate的分别 常见的异步方式async 和 await C# Task用法 c#源码的执行过程

    反爬虫:利用ASP.NET MVC的Filter和缓存(入坑出坑)   背景介绍: 为了平衡社区成员的贡献和索取,一起帮引入了帮帮币.当用户积分(帮帮点)达到一定数额之后,就会“掉落”一定数量的“帮帮 ...

  7. ES6中async和await说明和用法

    昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了. 先说一下async的用法,它作为一个 ...

  8. [译] C# 5.0 中的 Async 和 Await (整理中...)

    C# 5.0 中的 Async 和 Await [博主]反骨仔 [本文]http://www.cnblogs.com/liqingwen/p/6069062.html 伴随着 .NET 4.5 和 V ...

  9. 在MVC中使用async和await的说明

    首先,在mvc中如果要用纯异步请不要使用async和await,可以直接使用Task.Run. 其次,在mvc中使用async和await可以让系统开新线程处理Task的代码,同时不必等Task执行结 ...

随机推荐

  1. selector-item属性

    今天做的项目,发现通过键盘选中一个button以后,并没有出现button样式的变化,后来发现是selector里面缺少状态配置的原因.这里就顺便把用到的属性记录了下来,方便以后使用.当然它的属性很多 ...

  2. Fragment-两种使用方式

    这篇我们就用实例来看看我们在代码中如何使用Fragment 一:静态添加Fragment 新建一个项目,添加两个Fragment的布局文件fragment_title,fragment_content ...

  3. Fragment-生命周期

    Fragment生命周期图 一.Fragment的几种状态: 与Activity类似,Fragment也有一下几种状态: · 活动状态:当前Fragment位于前台,可见,可获得焦点. · 暂停状态: ...

  4. Postman APP

    http://chromecj.com/web-development/2017-12/870.html    Postman 工具模拟http各种协议请求.

  5. Codeforces 129A-Cookies(暴力)

    A. Cookies time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  6. win8用久了变得非常慢, 磁盘占用100%

    完美解决方式:  直接重装win7 完美解决这个问题 在网上查了非常久也没找到有效方法, 求教

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

  8. mysql 造1亿条记录的单表--大数据表

    读写文件 背景及木:现有数据1000w单表,为压力测试准备1亿条数据. 步骤: 1.将1000w条记录,除id外都导入到多个文件中: //DELIMITER DROP PROCEDURE if EXI ...

  9. JS和安卓 IOS的交互 例子式记录

    (function () { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexO ...

  10. codeforces 1037E. Trips(倒叙)

    题目传送门: 解题思路: 正着搞好像有点恶心. 反着搞. 一边删一边搞,从崩坏的地方开始,入度--. 最后dfs崩坏,更新答案. 注意要把边删掉防止重复崩坏. 代码: #include<cstd ...