1.简介:

 
 
async和await在干什么,async用于申明一个function是异步的,而await可以认为是async wait的简写,等待一个异步方法执行完成。

2.基本语法

 

在Chrome里申明这样一个函数,可以在控制台看到返回的其实就是一个Promise对象。
扩展需要了解的就是Chrome现在也支持asyncFunction,可以在Chrome控制台测试:
console.log(async function(){}.constructor);
ƒ AsyncFunction() { [native code] }

3.规则

 
如图,await放在普通函数里是会报错的。
 
eg:
async function demo() {
let result = await Promise.resolve(123);
console.log(result);
}
demo();

4.应用

Promise虽然一方面解决了callback的回调地狱,但是相对的把回调“纵向发展”了,形成了一个回调链。eg:

function sleep(wait) {
return new Promise((res,rej) => {
setTimeout(() => {
res(wait);
},wait);
});
} /*
let p1 = sleep(100);
let p2 = sleep(200);
let p =*/ sleep(100).then(result => {
return sleep(result + 100);
}).then(result02 => {
return sleep(result02 + 100);
}).then(result03 => {
console.log(result03);
})

控制台:
300

后面的结果都是依赖前面的结果。
改成async/await写法就是:

async function demo() {
let result01 = await sleep(100);
//上一个await执行之后才会执行下一句
let result02 = await sleep(result01 + 100);
let result03 = await sleep(result02 + 100);
// console.log(result03);
return result03;
} demo().then(result => {
console.log(result);
});

因为async返回的也是promise对象,所以用then接受就行了。
结果:
300
需要注意的就是await是强制把异步变成了同步,这一句代码执行完,才会执行下一句。

5.错误处理

 
如果是reject状态,可以用try-catch捕捉
eg:
let p = new Promise((resolve,reject) => {
setTimeout(() => {
reject('error');
},1000);
}); async function demo(params) {
try {
let result = await p;
}catch(e) {
console.log(e);
}
} demo();

结果:
error
这是基本的错误处理,但是当内部出现一些错误时,和上面Promise有点类似,demo()函数不会报错,还是需要catch回调捕捉。这就是内部的错误被“静默”处理了

let p = new Promise((resolve,reject) => {
setTimeout(() => {
reject('error');
},1000);
}); async function demo(params) {
// try {
let result = name;
// }catch(e) {
// console.log(e);
// }
} demo().catch((err) => {
console.log(err);
})

6.注意你的并行执行和循环

比如上面的例子:

async function demo() {
let result01 = await sleep(100);
//上一个await执行之后才会执行下一句
let result02 = await sleep(result01 + 100);
let result03 = await sleep(result02 + 100);
// console.log(result03);
return result03;
} demo().then(result => {
console.log(result);
});

如果这三个是你想异步发出的AJAX请求,在这段代码里其实是同步的,第一个发出去才会发第二个,所以async/await需要谨慎使用。

现在有一些forEach或者map的循环里,比如在forEach里使用await,这时候的上下文就变成了array,而不是async function,就会报错。这时候你就要想到是什么错误。

最新文章

  1. windows bat 设置代理上网脚本bat
  2. android 开发中fragment 遇到的问题
  3. Swift Swift中的反射
  4. 利用COPYDATASTRUCT传递命令行参数给驻留内存的进程(SendMessage应用)
  5. struts2+hibernate-jpa+Spring+maven 整合(1)
  6. Node.js + Express + Mongodb 开发搭建个人网站(二)
  7. [Redux] React Todo List Example (Toggling a Todo)
  8. log4cpp的初步使用
  9. C/C++ 知识点---设计模式
  10. ELK 经典用法—企业自定义日志手机切割和mysql模块
  11. c#多线程同步之Semaphore
  12. Distance on the tree(数剖 + 主席树)
  13. [BeiJing wc2012]冻结 题解
  14. LOD,听起来很牛逼的样子
  15. OC -网络请求 - NSURLConnection - POST
  16. ubuntu 16.04 安装pycharm
  17. Element-UI中Upload上传文件前端缓存处理
  18. 3. STL编程三
  19. go语言基本介绍
  20. 第6课:datetime模块、操作数据库、__name__、redis、mock接口

热门文章

  1. offset系列,client系列,scroll系列回顾
  2. java~api返回值的标准化
  3. c# 获取当前时间的微秒
  4. vue-router导航守卫(router.beforeEach())的使用
  5. python3打开winodows文件问题
  6. HttpClient封装方法
  7. WebForm+一般处理程序+Ajax聊天
  8. Java虚拟机垃圾收集算法
  9. 如何编写最佳的Dockerfile
  10. element-tree-grid(表格树)的使用