项目开发中一些常用的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让异步美如画的更多相关文章

  1. 前端项目中常用es6知识总结 -- let、const及数据类型延伸

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const  2 ...

  2. 前端项目中常用es6知识总结 -- 箭头函数及this指向、尾调用优化

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  3. 前端项目中常用es6知识总结 -- Promise逃脱回调地狱

    项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...

  4. 使用ES6新特性async await进行异步处理

    我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点c ...

  5. async+await处理异步问题

    在编写网页的时候我们常常会遇到异步问题,async+await是es6提出的解决异步的方法,下面我们来看看这个方法怎么实现解决异步的, 大家都知道,setTimeout是一个定时器.他是一个异步执行的 ...

  6. ES6系列之项目中常用的新特性

    ES6系列之项目中常用的新特性 ES6常用特性 平时项目开发中灵活运用ES6+语法可以让开发者减少很多开发时间,提高工作效率.ES6版本提供了很多新的特性,接下来我列举项目中常用的ES6+的特性: l ...

  7. 在Vue&Element前端项目中,对于字典列表的显示处理

    在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如 ...

  8. Android 项目中常用到的第三方组件

    项目中常用到的第三方组件 1 社会化分享ShareSDK-Core-2.5.9.jarShareSDK-QQ-2.5.9.jarShareSDK-QZone-2.5.9.jarShareSDK-Sin ...

  9. 项目中常用js方法整理common.js

    抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...

随机推荐

  1. 同一个事务里 查询 已删除可是未提交的数据[bug记录]

    前几天犯了个低级错误.在一个事务方法里老是查询不到某条记录,可是debug卡住时,用db工具查.又能查出值. 经过一番折腾,原来是我在同一个事务里 查询 了已删除可是未提交的数据.当然查询不到了! . ...

  2. 一起talk C栗子吧(第八十一回:C语言实例--进程停止)

    各位看官们,大家好,上一回中咱们说的是进程相互排斥的样例,这一回咱们说的样例是:进程停止.闲话休提,言归正转. 让我们一起talk C栗子吧! 我们在前面的章回中介绍了怎样创建进程,只是没有介绍停止进 ...

  3. java教程(五)SSH框架-配置

    前言:从这篇博客開始我将继续讲述Java教程:SSH篇.主要内容环绕SSH框架分析与搭建,今天先简介一下SSH的配置. SSH配置顺序是: spring-->hibernate-->str ...

  4. cocos2d-x 3.1.1学习笔记[23]寻找主循环 mainloop

    文章出自于  http://blog.csdn.net/zhouyunxuan cocos2d到底是怎样把场景展示给我们的,我一直非常好奇. 凭个人猜想,引擎内部的结构类似于这样 while(true ...

  5. BZOJ2895: 球队预算

    [传送门:BZOJ2895] 简要题意: 在一个篮球联赛里,有n支球队,球队的支出是和他们的胜负场次有关系的,具体来说,第i支球队的赛季总支出是Ci*x^2+Di*y^2,Di<=Ci.(赢得多 ...

  6. 快速定位java系统的线上问题--转

    原文地址:http://m.blog.csdn.net/article/details?id=43376943 前言:我们的场景并没有像BAT等大型互联网公司里的系统那么复杂,但是基本上也有一定的规模 ...

  7. Huawei设备配置系统时钟

    系统时钟是设备上的系统时间戳.由于地域的不同,用户可以根据当地规定设置系统时钟.用户必须正确设置系统时钟以确保其与其他设备保持同步.华为设备出厂时默认采用了协调世界时(UTC),但是没有配置时区所有在 ...

  8. Annotation中Result的params属性

    这个属性只有在重定向时有用,而转发时不会设置参数. 如: @Results({ @Result(name="success", location="page", ...

  9. [Python] Check for None (Null) in Python

    If you’ve used other programming languages, you may have learned that an empty object is not the sam ...

  10. 数据库优化技巧之in和not in

    在编写SQL语句时,假设要实现一张表有而另外一张表没有的数据时. 通常第一直觉的写法是: select * from table1 where table1.id not in(select id f ...