ES7的async/await用法實例詳解

這篇文章主要介紹了深入理解ES7的async/await的用法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在最開始學習ES6的Promise時，曾寫過一篇博文《promise和co搭配生成器函數方式解決js代碼異步流程的比較》 ，文章中對比了使用Promise和co模組搭配生成器函數解決js異步的異同。

在文章最後，提到了ES7的async和await，只是當時只是簡單的提了一下，並未做深入探討。

在前兩個月發布的Nodejs V7中，已添加了對async和await的支持，今天就來對這個東東做一下深入的探究。以更優雅的方法寫非同步程式碼。

async/await是什麼

async/await可以說是co模組和產生器函數的語法糖。用更清晰的語意解決js異步程式碼。

熟悉co模組的同學應該都知道，co模組是TJ大神寫的一個使用生成器函數來解決非同步流程的模組，可以看做是生成器函數的執行器。而async/await則是對co模組的升級，內建生成器函數的執行器，不再依賴co模組。同時，async返回的是Promise。

從上面來看，不管是co模組還是async/await，都是將Promise作為最基礎的單元，對Promise不很了解的同學可以先深入了解Promise。

對比Promise,co,async/await

#下面我們使用一個簡單的例子，來比較三種方式的異同，以及取捨。

我們採用mongodb的nodejs驅動，查詢mongodb資料庫作為例子，原因是mongodb的js驅動程式已經預設實作了回傳Promise，而不用我們單獨去包裝Promise了。

使用Promise鏈

MongoClient.connect(url + db_name).then(db=> {
  return db.collection('blogs');
}).then(coll=> {
  return coll.find().toArray();
}).then(blogs=> {
  console.log(blogs.length);
}).catch(err=> {
  console.log(err);
})

Promise的then()方法可以傳回另一個Promise，也可以傳回一個同步的值，如果回傳的是一個同步值，將會被包裝成一個Promise。

上面的範例中，db.collection()會傳回一個同步的值，即集合對象，但被包裝成Promise，將會透傳到下一個then()方法。

上面一個例子，是使用的Promise鏈。

先連接資料庫MongoClient.connect()傳回一個Promise，然後在then()方法取得資料庫物件db，然後再取得到coll物件再回傳。在下一個then()方法取得coll對象，然後進行查詢，查詢結果返回，逐層呼叫then()方法，形成一個Promise鏈。

在這個Promise鏈上，如果任何一個環節出現異常，都會被最後的catch()捕捉到。

可以說，這個使用Promise鏈寫的程式碼，比層層呼叫回呼函數更優雅，流程也更明確。先取得資料庫對象，再取得集合對象，最後查詢資料。

但這裡有個不太「優雅」的問題，在於，每一個then()方法取得的對象，都是上一個then()方法返回的資料。而不能跨層訪問。

什麼意思，就是說在第三個then(blogs => {})中我們只能取得到查詢的結果blogs，而不能使用上面的db物件和coll物件。這時候，如果要列印blogs清單後，要關閉資料庫db.close()怎麼辦？

這個時候，可以兩個解決方法：

第一種是，使用then()巢狀。我們將Promise鏈打斷，使之嵌套，猶如使用回調函數的嵌套一般：

MongoClient.connect(url + db_name).then(db=> {
  let coll = db.collection('blogs');
  coll.find().toArray().then(blogs=> {
    console.log(blogs.length);
    db.close();
  }).catch(err=> {
    console.log(err);
  });
}).catch(err=> {
  console.log(err);
})

這裡我們將兩個Promise嵌套，這樣在最後一個查詢操作裡面，就可以呼叫外面的db物件了。但這中方式，並不推薦。原因很簡單，我們從一種回呼函數地獄走向了另一種Promise回調地獄。

而且，我們要對每個Promise的異常進行捕捉，因為Promise沒有形成鏈。

還有一種方式， 是在每個then()方法裡都會將db傳過來：

MongoClient.connect(url + db_name).then(db=> {
  return {db:db,coll:db.collection('blogs')};
}).then(result=> {
  return {db:result.db,blogs:result.coll.find().toArray()};
}).then(result=> {
  return result.blogs.then(blogs=> {  //注意这里，result.coll.find().toArray()返回的是一个Promise，因此这里需要再解析一层
    return {db:result.db,blogs:blogs}
  })
}).then(result=> {
  console.log(result.blogs.length);
  result.db.close();
}).catch(err=> {
  console.log(err);
});

我們在每個then()方法在的回傳中，都將db及其每次的其他結果組成一個物件回傳。請注意，如果每次的結果都是一個同步的值還好說，但是如果是一個Promise值，每一個Promise都需要多做一層解析。

例如上面的一個例子，第二個then()方法回傳的{db:result.db,blogs:result.coll.find().toArray()} 物件中， blogs 是一個Promise，在下一個then()方法中，我們無法直接引用部落格清單數組值，因此需要先呼叫then()方法解析一層，然後再將兩個同步值db和blogs傳回。

注意，這裡涉及了Promise的嵌套，不過一個Promise只嵌套一層then()。

這種方式，也是很頭痛的一種方式，因為如果遇到then()方法中回傳的不是同步的值，而是Promise的話，我們需要多做很多工作。而且，每次都透傳一個「多餘」的db對象，在邏輯上也有點冗餘。

但除此之外，对于Promise链的使用，如果遇到上面的问题，好像也没其他更好的方法解决了。我们只能根据场景去选择一种“最优”的方案，如果要使用Promise链的话。

鉴于Promise上面蛋疼的问题，TJ大神将ES6中的生成器函数，用co模块包装了一下，以更优雅的方式来解决上面的问题。

co搭配生成器函数

如果使用co模块搭配生成器函数，那么上面的例子可以改写如下：

const co = require('co');
co(function* (){
  let db = yield MongoClient.connect(url + db_name);
  let coll = db.collection('blogs');
  let blogs = yield coll.find().toArray();
  console.log(blogs.length);
  db.close();
}).catch(err=> {
  console.log(err);
});

co是一个函数，将接受一个生成器函数作为参数，去执行这个生成器函数。生成器函数中使用 yield 关键字来“同步”获取每个异步操作的值。

上面代码在代码形式上，比上面使用Promise链要优雅，我们消灭了回调函数，代码看起来都是同步的。除了使用co和yield有点怪之外。

使用co模块，我们要将所有的操作包装成一个生成器函数，然后使用co()去调用这个生成器函数。看上去也还可以接受，但是ES的进化是不满足于此的，于是async/await被提到了ES7的提案。

async/await

我们先看一下使用async/await改写上面的代码：

(async function(){
  let db = await MongoClient.connect(url + db_name);
  let coll = db.collection('blogs');
  let blogs = await coll.find().toArray();
  console.log(blogs.length);
  db.close();
})().catch(err=> {
  console.log(err);
});

我们对比代码可以看出，async/await和co两种方式代码极为相似。

co换成了async，yield换成了await。同时生成器函数变成了普通函数。

这种方式在语义上更加清晰明了，async表明这个函数是异步的，同时await表示要“等待”异步操作返回值。

async函数返回一个Promise，上面的代码其实是这样：

let getBlogs = async function(){
  let db = await MongoClient.connect(url + db_name);
  let coll = db.collection('blogs');
  let blogs = await coll.find().toArray();
  db.close();
  return blogs;
};

getBlogs().then(result=> {
  console.log(result.length);
}).catch(err=> {
  console.log(err);
})

我们定义getBlogs为一个async函数，最后返回得到的博客列表最终会被包装成一个Promise返回，如上，我们直接调用getBlogs().then()方法可获取async函数返回值。

好了，上面我们简单对比了一下三种解决异步方案，下面我们来深入了解一下async/await。

深入async/await

async返回值

async用于定义一个异步函数，该函数返回一个Promise。

如果async函数返回的是一个同步的值，这个值将被包装成一个理解resolve的Promise，等同于return Promise.resolve(value) 。

await用于一个异步操作之前，表示要“等待”这个异步操作的返回值。await也可以用于一个同步的值。

//返回一个Promise
let timer = async functiontimer(){
  return new Promise((resolve,reject) => {
    setTimeout(()=> {
      resolve('500');
    },500);
  });
}

timer().then(result=> {
 console.log(result); //500
}).catch(err=> {
  console.log(err.message);
});

//返回一个同步的值
let sayHi = async functionsayHi(){
 let hi = await 'hello world';  
 return hi; //等同于return Promise.resolve(hi);
}

sayHi().then(result=> {
 console.log(result);
});

上面这个例子返回是一个同步的值，字符串'hello world'，sayHi()是一个async函数，返回值被包装成一个Promise，可以调用then()方法获取返回值。

对于一个同步的值，可以使用await，也可以不使用await。效果效果是一样的。具体用不用，看情况。

比如上面使用mongodb查询博客那个例子， let coll = db.collection('blogs'); ，这里我们就没有用await，因为这是一个同步的值。当然，也可以使用await，这样会显得代码统一。虽然效果是一样的。

async函数的异常

let sayHi = async functionsayHi(){
  throw new Error('出错了');
}
sayHi().then(result=> {
 console.log(result);
}).catch(err=> {
  console.log(err.message);  //出错了
});

我们直接在async函数中抛出一个异常，由于返回的是一个Promise，因此，这个异常可以调用返回Promise的catch()方法捕捉到。

和Promise链的对比：

我们的async函数中可以包含多个异步操作，其异常和Promise链有相同之处，如果有一个Promise被reject()那么后面的将不会再进行。

let count = ()=>{
  return new Promise((resolve,reject) => {
    setTimeout(()=>{
      reject('故意抛出错误');
    },500);
  });
}

let list = ()=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve([1,2,3]);
    },500);
  });
}

let getList = async ()=>{
  let c = await count();
  let l = await list();
  return {count:c,list:l};
}
console.time('begin');
getList().then(result=> {
  console.log(result);
}).catch(err=> {
  console.timeEnd('begin');
  console.log(err);
});
//begin: 507.490ms
//故意抛出错误

如上面的代码，定义两个异步操作，count和list，使用setTimeout延时500毫秒，count故意直接抛出异常，从输出结果来看，count()抛出异常后，直接由catch()捕捉到了，list()并没有继续执行。

并行

使用async后，我们上面的例子都是串行的。比如上个list()和count()的例子，我们可以将这个例子用作分页查询数据的场景。

先查询出数据库中总共有多少条记录，然后再根据分页条件查询分页数据，最后返回分页数据以及分页信息。

我们上面的例子count()和list()有个“先后顺序”，即我们先查的总数，然后又查的列表。其实，这两个操作并无先后关联性，我们可以异步的同时进行查询，然后等到所有结果都返回时再拼装数据即可。

let count = ()=>{
  return new Promise((resolve,reject) => {
    setTimeout(()=>{
      resolve(100);
    },500);
  });
}

let list = ()=>{
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
      resolve([1,2,3]);
    },500);
  });
}

let getList = async ()=>{
  let result = await Promise.all([count(),list()]);
  return result;
}
console.time('begin');
getList().then(result=> {
  console.timeEnd('begin'); //begin: 505.557ms
  console.log(result);    //[ 100, [ 1, 2, 3 ] ]
}).catch(err=> {
  console.timeEnd('begin');
  console.log(err);
});

我们将count()和list()使用Promise.all()“同时”执行，这里count()和list()可以看作是“并行”执行的，所耗时间将是两个异步操作中耗时最长的耗时。

最后得到的结果是两个操作的结果组成的数组。我们只需要按照顺序取出数组中的值即可。

JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题。以往在浏览器中，因为与服务器通讯是一种比较昂贵的操作，因此比较复杂的业务逻辑往往都放在服务器端，前端 JavaScript 只需要少数几次 AJAX 请求就可拿到全部数据。

但是到了 webapp 风行的时代，前端业务逻辑越来越复杂，往往几个 AJAX 请求之间互有依赖，有些请求依赖前面请求的数据，有些请求需要并行进行。还有在类似 Node.js 的后端 JavaScript 环境中，因为需要进行大量 IO 操作，问题更加明显。这个时候使用回调函数来组织代码往往会导致代码难以阅读。

现在比较流行的解决这个问题的方法是使用 Promise，可以将嵌套的回调函数展平。但是写代码和阅读依然有额外的负担。

另外一个方案是使用 ES6 中新增的 generator，因为 generator 的本质是可以将一个函数执行暂停，并保存上下文，再次调用时恢复当时的状态。co 模块是个不错的封装。但是这样略微有些滥用 generator 特性的感觉。

ES7 中有了更加标准的解决方案，新增了 async/await 两个关键词。async 可以声明一个异步函数，此函数需要返回一个 Promise 对象。await可以等待一个 Promise 对象 resolve，并拿到结果。

比如下面的例子，以往我们无法在 JavaScript 中使用常见的 sleep 函数，只能使用 setTimeout 来注册一个回调函数，在指定的时间之后再执行。有了 async/await 之后，我们就可以这样实现了：

async function sleep(timeout) {
 return new Promise((resolve, reject) => {
  setTimeout(function() {
   resolve();
  }, timeout);
 });
}

(async function() {
 console.log('Do some thing, ' + new Date());
 await sleep(3000);
 console.log('Do other things, ' + new Date());
})();

执行此段代码，可以在终端中看到结果：

Do some thing, Mon Feb 23 2015 21:52:11 GMT+0800 (CST)
Do other things, Mon Feb 23 2015 21:52:14 GMT+0800 (CST)

另外 async 函数可以正常的返回结果和抛出异常。await 函数调用即可拿到结果，在外面包上 try/catch 就可以捕获异常。下面是一个从豆瓣 API 获取数据的例子：

var fetchDoubanApi = function() {
 return new Promise((resolve, reject) => {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
   if (xhr.readyState === 4) {
    if (xhr.status >= 200 && xhr.status < 300) {
     var response;
     try {
      response = JSON.parse(xhr.responseText);
     } catch (e) {
      reject(e);
     }
     if (response) {
      resolve(response, xhr.status, xhr);
     }
    } else {
     reject(xhr);
    }
   }
  };
  xhr.open(&#39;GET&#39;, &#39;https://api.douban.com/v2/user/aisk&#39;, true);
  xhr.setRequestHeader("Content-Type", "text/plain");
  xhr.send(data);
 });
};

(async function() {
 try {
  let result = await fetchDoubanApi();
  console.log(result);
 } catch (e) {
  console.log(e);
 }
})();

async 函数的用法

同 Generator 函数一样，async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。当函数执行的时候，一旦遇到 await 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。
下面是一个例子。

async function getStockPriceByName(name) {
 var symbol = await getStockSymbol(name);
 var stockPrice = await getStockPrice(symbol);
 return stockPrice;
}

getStockPriceByName('goog').then(function (result){
 console.log(result);
});

阅读本文前，期待您对promise和ES6(ECMA2015)有所了解，会更容易理解。本文以体验为主，不会深入说明，结尾有详细的文章引用。

第一个例子

Async/Await应该是目前最简单的异步方案了，首先来看个例子。这里我们要实现一个暂停功能，输入N毫秒，则停顿N毫秒后才继续往下执行。

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      resolve();
    }, time);
  })
};

var start = async function () {
  // 在这里使用起来就像同步代码那样直观
  console.log('start');
  await sleep(3000);
  console.log('end');
};

start();

控制台先输出start，稍等3秒后，输出了end。

基本规则

async 表示这是一个async函数，await只能用在这个函数里面。await表示在这里等待promise返回结果了，再继续执行。await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）

获得返回值

await等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      // 返回 ‘ok'
      resolve('ok');
    }, time);
  })
};

var start = async function () {
  let result = await sleep(3000);
  console.log(result); // 收到 ‘ok'
};

捕捉错误

既然.then(..)不用写了，那么.catch(..)也不用写，可以直接用标准的try catch语法捕捉错误。

var sleep = function (time) {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      // 模拟出错了，返回 ‘error'
      reject('error');
    }, time);
  })
};

var start = async function () {
  try {
    console.log('start');
    await sleep(3000); // 这里得到了一个返回错误
    
    // 所以以下代码不会被执行了
    console.log('end');
  } catch (err) {
    console.log(err); // 这里捕捉到错误 `error`
  }
};

循环多个await

await看起来就像是同步代码，所以可以理所当然的写在for循环里，不必担心以往需要闭包才能解决的问题。

..省略以上代码
var start = async function () {
  for (var i = 1; i <= 10; i++) {
    console.log(`当前是第${i}次等待..`);
    await sleep(1000);
  }
};

值得注意的是，await必须在async函数的上下文中的。

..省略以上代码

let one2ten = [1,2,3,4,5,6,7,8,9,10];

// 错误示范
one2ten.forEach(function (v) {
  console.log(`当前是第${v}次等待..`);
  await sleep(1000); // 错误!! await只能在async函数中运行
});

// 正确示范
for(var v of one2ten) {
  console.log(`当前是第${v}次等待..`);
  await sleep(1000); // 正确, for循环的上下文还在async函数中
}

以上是ES7的async/await用法實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！