前端项目中常用es6知识总结 -- Async、Await让异步美如画
项目开发中一些常用的es6知识,主要是为以后分享小程序开发、node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫。
项目开发常用es6介绍
1、块级作用域 let const
2、箭头函数及this指向
3、promise、asnyc await语法
4、模块化 module export和import
5、解构赋值、字符串模板
……
asnyc await
首先看一段代码示例:
var promise = () => new Promise((resolve, reject) => {
setTimeout(() => {
resolve("我是数据")
}, 1000)
}) var func = async () => {
var data = await promise(); //await用于等待promise函数的结果
console.log(data) return data // 一秒后打印出 “我是数据”
}
console.log(func()) // Promise {<pending>} 即func函数的返回值是一个Promise
//调用就立即返回一个状态为pending的Promise,一秒后变成resolve状态
由此可以看出:
1、async表示函数里有异步操作
2、await表示紧跟在后面的表达式需要等待结果(阻塞代码往下执行)
3、async函数的返回值是 Promise 对象
既然async函数的返回值是 Promise 对象,那就可以使用then方法来接收resolve传递过来的参数,上述代码也可以这样实现:
var promise = () => new Promise((resolve, reject) => {
setTimeout(() => {
resolve("我是数据")
}, 1000)
}) var func = async () => {
var data = await promise(); //await用于等待promise函数的结果
console.log(data) return data // 一秒后打印出 “我是数据”
} // console.log(func()) // Promise {<pending>} 即func函数的返回值是一个Promise
//调用就立即返回一个状态为pending的Promise,一秒后变成resolve状态
func().then((data) => {
console.log(data) //我是数据
})
所以,再追加一条:
4、async函数内部return语句的返回值,就是then方法回调函数的参数。
也就意味着如果async函数内部没有写return语句,then方法回调函数的参数值就是undefiend。
错误处理
如果await后面的异步操作出错,那么等同于async函数返回的 Promise 对象被reject。同样如果有多个await,其中一个出错也会将Promise 对象的状态置为reject。所以在进行错误处理的时候所以最好把await命令放在try...catch代码块中。
var promise = (data, ms) => new Promise((resolve, reject) => {
setTimeout(() => {
resolve(data)
}, ms)
}) var func = async () => {
try {
var data1 = await promise("数据1", 1000);
console.log(data1) var data2 = await promise("数据2", 1000);
console.log(data2) var data3 = await promise("数据3", 1000);
console.log(data3)
} catch (error) {
console.error(err)
}
}
func() //每隔一秒依次打印 数据1 数据2 数据3
//如果希望当前一个异步失败不影响后面的异步操作执行可以将其单独放在try{}catch(){}语句里
注意:多个await命令后面的异步操作,如果不存在相互依赖关系,最好让它们同时触发。因为当多个await后面的异步操作是一个接一个的完成的,这样会比较耗时,如果将他们同时触发则会大大缩短程序执行的时间。比如上述代码可以按照如下写法同时执行:
var promise = (data, ms) => new Promise((resolve, reject) => {
setTimeout(() => {
resolve(data)
}, ms)
})
var func = async () => {
try {
//写法1
var data = await Promise.all([promise("数据1", 1000), promise("数据2", 1000), promise("数据3", 1000)]);
console.log(data) //["数据1", "数据2", "数据3"] //写法2
var datafn1 = promise("数据1", 1000);
var datafn2 = promise("数据2", 1000);
var datafn3 = promise("数据3", 1000);
var data1 = await datafn1;
var data2 = await datafn2;
var data3 = await datafn3;
console.log(data1, data2, data3) //数据1 数据2 数据3
} catch (error) {
console.error(error)
}
}
func()
上面两种写法,都是同时触发,这样就会缩短程序的执行时间。 注意:正常情况下,await命令后面是一个 Promise 对象,返回该对象的结果。如果不是 Promise 对象,就直接返回对应的值。
async function func() {
// return 123;
// return await 123;
return await Promise.resolve(123)
}
func().then(function(data) {
console.log(data) //
})
当然:如果func函数内部没有写return,then方法的回调函数里data就等于undefined
前端项目中常用es6知识总结 -- Async、Await让异步美如画的更多相关文章
- 前端项目中常用es6知识总结 -- let、const及数据类型延伸
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2 ...
- 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...
- 前端项目中常用es6知识总结 -- Promise逃脱回调地狱
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...
- 使用ES6新特性async await进行异步处理
我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点c ...
- async+await处理异步问题
在编写网页的时候我们常常会遇到异步问题,async+await是es6提出的解决异步的方法,下面我们来看看这个方法怎么实现解决异步的, 大家都知道,setTimeout是一个定时器.他是一个异步执行的 ...
- ES6系列之项目中常用的新特性
ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...
- 在Vue&Element前端项目中,对于字典列表的显示处理
在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...
- Android 项目中常用到的第三方组件
项目中常用到的第三方组件 1 社会化分享ShareSDK-Core-2.5.9.jarShareSDK-QQ-2.5.9.jarShareSDK-QZone-2.5.9.jarShareSDK-Sin ...
- 项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
随机推荐
- 荣耀A55高调上市仅仅为孤独求败?
坦白说.华为近年来在手机市场上确实取得了一些成绩.比方之前P6的出现就凭借超薄的设计.突出的性价比让大家看到了国产手机的新希望.按理说.在手机市场上尝到甜头的华为应该继续坚持低价.亲民的路线, ...
- Task Scheduler
https://technet.microsoft.com/en-us/library/cc748993(v=ws.11).aspx#BKMK_winui If Task Scheduler is n ...
- zzulioj--1801--xue姐的小动物(水题)
1801: xue姐的小动物 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 594 Solved: 168 SubmitStatusWeb Boar ...
- orm 通用方法——QueryModelById 主键查询
方法定义: /** * 描述:根据主键查询 * 作者:Tianqi * 日期:2014-09-15 * param:model 对象实例,包含主键 * return:对象 * */ func Quer ...
- 洛谷P4051 [JSOI2007]字符加密
题目描述 喜欢钻研问题的JS 同学,最近又迷上了对加密方法的思考.一天,他突然想出了一种他认为是终极的加密办法:把需要加密的信息排成一圈,显然,它们有很多种不同的读法. 例如‘JSOI07’,可以读作 ...
- javaScript call与apply学习笔记
call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...
- 学习参考《Python数据分析与挖掘实战(张良均等)》中文PDF+源代码
学习Python的主要语法后,想利用python进行数据分析,感觉<Python数据分析与挖掘实战>可以用来学习参考,理论联系实际,能够操作数据进行验证,基础理论的内容对于新手而言还是挺有 ...
- ArcGIS Engine中添加点、线、面元素
转自原文 ArcGIS Engine中添加点.线.面元素 此种方式为IElement的方式在axMapControl的GraphicsContainer中好绘制图形. //画点 IPoint pt = ...
- 读书笔记-深入理解JVM虚拟机-1.OOM初探
Java堆OOM(Out-Of-Memory)异常 执行例如以下程序,爆出异常 java.lang.OutOfMemoryError: Java heap space /** * VM Args:-X ...
- JavaScript数组的某些操作(二)
7.颠倒数组中元素的顺序(注意:不是为数组排序)--reverse方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...