怎么使用Async函數

本篇內容介紹了“怎么使用Async函數”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

Async 函數是一個非常了不起的東西，它將會在Chrome  55中得到默認支持。它允許你書寫基于promise的代碼，但它看起來就跟同步的代碼一樣，而且不會阻塞主線程。所以，它讓你的異步代碼看起來并沒有那么"聰明"卻更具有可讀性。

Async 函數的代碼示例：

async function myFirstAsyncFunction() {   try {     const fulfilledValue = await promise;   }   catch (rejectedValue) {     // …   } }

如果你在一個函數聲明的的前面使用async關鍵字，那你就可以在這個函數內使用await。當你去await一個promise的時候，這個函數將會以非阻塞的方式暫停，直到promise處于settled狀態。如果這個Promise返回的是成功的狀態，你將會得到返回值，如果返回的是失敗的狀態，那失敗的信息將會被拋出。
提示: 如果你對promises不熟悉，請查看我們的promises指南

示例1： 打印響應信息

假設我們想要請求一個URL然后把響應信息打印出來，下面是使用promise的示例代碼：

function logFetch(url) {   return fetch(url)     .then(response => response.text())     .then(text => {       console.log(text);     }).catch(err => {       console.error('fetch failed', err);     }); }

下面用async 函數來實現同樣的功能：

async function logFetch(url) {   try {     const response = await fetch(url);     console.log(await response.text());   }   catch (err) {     console.log('fetch failed', err);   } }

可以看到代碼行數和上例一樣，但是使用async函數的方式使得所有的回調函數都不見了!這讓我們的代碼非常容易閱讀，特別是那些對promise不是特別熟悉的同學。

提示:  你await的任何值都是通過Promise.resolve()來傳遞的，所以你可以安全地使用非本地的promise.

Async 函數的返回值

不管你是否在函數內部使用了await, Async 函數總是返回一個promise 。當  async函數顯示滴返回任意值時,返回的promise將會調用resolve方法,  當async函數拋出異常錯誤時，返回的promise將會調用reject方法，所以：

// wait ms milliseconds function wait(ms) {   return new Promise(r => setTimeout(r, ms)); }  async function hello() {   await wait(500);   return 'world'; }

當執行hello()時，返回一個成功狀態，并且傳遞的值為world的promise.

async function foo() {   await wait(500);   throw Error('bar'); }

當執行hello()時，返回一個失敗狀態，并且傳遞的值為Error('bar')的promise.

示例2： 響應流

在更復雜點的案例中, async函數更能體現其優越性。假設我們想要在記錄chunks數據時將其變成響應流， 并返回最終的信息長度。

提示: "記錄chunks" 讓我感覺很別扭.

下面是使用promise的方式：

function getResponseSize(url) {   return fetch(url).then(response => {     const reader = response.body.getReader();     let total = 0;      return reader.read().then(function processResult(result) {       if (result.done) return total;        const value = result.value;       total += value.length;       console.log('Received chunk', value);        return reader.read().then(processResult);     })   }); }

看清楚了，我是 promise “地下黨” Jake Archibald。看到我是怎樣在它內部調用 processResult  并建立異步循環的了嗎?這樣寫讓我覺得自己“很聰明”。但是正如大多數“聰明的”代碼一樣，你不得不盯著它看很久才能搞清楚它在做什么，就像九十年代的那些魔眼照片一樣。引用

讓我們用async函數來重寫上面的功能：

async function getResponseSize(url) {   const response = await fetch(url);   const reader = response.body.getReader();   let result = await reader.read();   let total = 0;    while (!result.done) {     const value = result.value;     total += value.length;     console.log('Received chunk', value);     // get the next result     result = await reader.read();   }    return total; }

所有的"聰明"的代碼都不見了。現在新的異步循環使用了可靠的，看起來普通的while循環來代替，這使我感覺非常的整潔。更多的是，在將來，我們將會使用async  iterators,它將會使用for of循環來代替while循環，那這講會變得更加整潔!

提示: 我對streams比較有好感。如果你對streams不太熟悉，可以看看我的指南

Async 函數的其他語法

我們已經看過了async function() {} 的使用方式，但是async關鍵字還可以用于其他的函數語法中。

箭頭函數

// map some URLs to json-promises const jsonPromises = urls.map(async url => {   const response = await fetch(url);   return response.json(); });

提示:  array.map(func)不會在乎你給的是否是async函數，它只會把它當做一個返回值是promise的普通函數。所以，第二個回調的執行并不會等待***個回調中的await處理完成。

對象方法

const storage = {   async getAvatar(name) {     const cache = await caches.open('avatars');     return cache.match(`/avatars/${name}.jpg`);   } };  storage.getAvatar('jaffathecake').then(…);

類方法

class Storage {   constructor() {     this.cachePromise = caches.open('avatars');   }    async getAvatar(name) {     const cache = await this.cachePromise;     return cache.match(`/avatars/${name}.jpg`);   } }  const storage = new Storage(); storage.getAvatar('jaffathecake').then(…);

提示: 類的 constructors和getters/settings不能是 async 函數。

注意!請避免太過強調順序

盡管你正在寫的代碼看起來是同步的，但請確保你沒有錯失并行處理的機會。

async function series() {   await wait(500);   await wait(500);   return "done!"; }

上面的代碼需要 1000ms才能完成，然而：

async function parallel() {  const wait1 = wait(500);  const wait2 = wait(500);  await wait1;  await wait2;  return "done!"; }

上面的代碼只需要500ms，因為兩個wait在同一時間處理了。

示例3： 順序輸出請求信息

假設我們想要獲取一系列的URL響應信息，并將它們盡可能快的按正確的順序打印出來。

深呼吸....下面就是使用promise來實現的代碼：

function logInOrder(urls) {   // fetch all the URLs   const textPromises = urls.map(url => {     return fetch(url).then(response => response.text());   });    // log them in order   textPromises.reduce((chain, textPromise) => {     return chain.then(() => textPromise)       .then(text => console.log(text));   }, Promise.resolve()); }

Yeah, 這達到了目的。我正在用reduce來處理一串的promise，我太"聰明"了。這是一個如此"聰明"的代碼，但我們***不要這樣做。

但是，當把上面的代碼轉換成使用 async函數來實現時，它看起來太有順序了，以至于會使我們很迷惑：

:-1: 不推薦 - 過于強調先后順序

async function logInOrder(urls) {   for (const url of urls) {     const response = await fetch(url);     console.log(await response.text());   } }

看起來整潔多了，但是我的第二個請求只有在***個請求被完全處理完成之后才會發出去，以此類推。這個比上面那個promise的實例慢多了。幸好這還有一個中立的方案：

:+1: 推薦 - 很好而且并行

async function logInOrder(urls) {   // fetch all the URLs in parallel   const textPromises = urls.map(async url => {     const response = await fetch(url);     return response.text();   });    // log them in sequence   for (const textPromise of textPromises) {     console.log(await textPromise);   } }

在這個例子中，全部的url一個接一個被請求和處理，但是那個'聰明的'的reduce被標準的，普通的和更具可讀性的for loop 循環取代了。

瀏覽器兼容性和解決方法

在我寫這篇文章時，Chrome 55已經默認支持async 函數。但是在所有主流瀏覽器中，它還在開發中：

• Edge - In build 14342+ behind a flag

• Firefox - active development

• Safari - active development

解決方法 1：Generators

所有的主流瀏覽器的***版本都支持generators，如果你正在使用它們，你可以稍稍polyfill一下 async函數.

Babel正可以為你做這些事情，這里有個通過Babel REPL寫的示例 - 是不是感覺對轉換后的代碼很熟悉。這個轉換機制是 Babel's es2017  preset的一部分。

提示: Babel REPL是一個很有趣的東西，試試吧。

我建議你現在就這樣做，因為當你的目標瀏覽器支持了async函數時，你只需要將Babel從你的項目中去除即可。但是如果你真的不想使用轉換工具，你可以使用Babel's  polyfill點擊預覽。

async function slowEcho(val) {   await wait(1000);   return val; }

當你使用了上面說的polyfill點擊預覽,你可以將上面的代碼替換為：

const slowEcho = createAsyncFunction(function*(val) {   yield wait(1000);   return val; });

注意到你通過給createAsyncFunction函數傳遞了一個generator (function*),然后使用yield 代替  await。除此之外它們的效果一樣。

解決方法2： regenerator

如果你想要兼容舊的瀏覽器，Babel同樣也能把generators給轉換了，這樣你就可以在IE8以上的瀏覽器中使用async函數，但你需要使用Babel的  es2017 preset和 the es2015 preset

你會看到轉換后的代碼并不好看，所以請小心代碼膨脹。

Async all the things!

一旦所有瀏覽器都支持async函數了，請在所有返回值是promise的函數上使用async!因為它不僅可以使你的代碼更tider，  而且它確保了async函數 總是返回一個 promise 。

“怎么使用Async函數”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！