在最新的ES7(ES2017)中提出的前端异步特性:async、await。
async顾名思义是“异步”的意思,async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思,就是用于等待异步完成。并且await只能在async函数中使用
通常async、await都是跟随Promise一起使用的。为什么这么说呢?因为async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么 就是什么);
await得到Promise对象之后就等待Promise接下来的resolve或者reject。
来看一段简单的代码:
- async function testSync() {
- const response = await new Promise(resolve => {
- setTimeout(() => {
- resolve("async await test...");
- }, 1000);
- });
- console.log(response);
- }
- testSync();//async await test...
就这样一个简单的async、await异步就完成了。使用async、await完成异步操作代码可读与写法上更像是同步的,也更容易让人理解。
JavaScript异步请求肯定会有请求失败的情况,上面也说到了async返回的是一个Promise对象。既然是返回一个Promise对象的话那处理当异步请求发生错误的时候我们就要处理reject的状态了。
在Promise中当请求reject的时候我们可以使用catch。为了保持代码的健壮性使用async、await的时候我们使用try catch来处理错误。
- async function catchErr() {
- try {
- const errRes = await new Promise((resolve, reject) => {
- setTimeout(() => {
- reject("http error...");
- }, 1000);
- );
- //平常我们也可以在await请求成功后通过判断当前status是不是200来判断请求是否成功
- // console.log(errRes.status, errRes.statusText);
- } catch(err) {
- console.log(err);
- }
- }
- catchErr(); //http error...
以上就是async、await使用try catch 处理错误的方式。
虽然async、await也使用到了Promise但是却减少了Promise的then处理使得整个异步请求代码清爽了许多。
以上就是个人对ES7 async、await的一些个人理解,后续有其他的会补充更新,写的不好的地方欢迎各位大神指正,谢谢!
来源: http://www.cnblogs.com/leungUwah/p/7932912.html