日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
[譯]Async函數(shù)，讓promise更友好！

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

站在用戶的角度思考問題，與客戶深入溝通，找到羅城網(wǎng)站設(shè)計(jì)與羅城網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋羅城地區(qū)。

Async 函數(shù)的代碼示例：

 
 
      
  
  1. async function myFirstAsyncFunction() { 
    2.   
  
  2.   try { 
    3.   
  
  3.     const fulfilledValue = await promise; 
    4.   
  
  4.   } 
    5.   
  
  5.   catch (rejectedValue) { 
    6.   
  
  6.     // … 
    7.   
  
  7.   } 
    8.   
  
  8. }  
    9.

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

示例1： 打印響應(yīng)信息

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

 
 
      
  
  1. function logFetch(url) { 
    2.   
  
  2.   return fetch(url) 
    3.   
  
  3.     .then(response => response.text()) 
    4.   
  
  4.     .then(text => { 
    5.   
  
  5.       console.log(text); 
    6.   
  
  6.     }).catch(err => { 
    7.   
  
  7.       console.error('fetch failed', err); 
    8.   
  
  8.     }); 
    9.   
  
  9. }  
    10.

下面用async 函數(shù)來實(shí)現(xiàn)同樣的功能：

 
 
      
  
  1. async function logFetch(url) { 
    2.   
  
  2.   try { 
    3.   
  
  3.     const response = await fetch(url); 
    4.   
  
  4.     console.log(await response.text()); 
    5.   
  
  5.   } 
    6.   
  
  6.   catch (err) { 
    7.   
  
  7.     console.log('fetch failed', err); 
    8.   
  
  8.   } 
    9.   
  
  9. }  
    10.

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

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

Async 函數(shù)的返回值

不管你是否在函數(shù)內(nèi)部使用了await, Async 函數(shù)總是返回一個promise 。當(dāng) async函數(shù)顯示滴返回任意值時,返回的promise將會調(diào)用resolve方法, 當(dāng)async函數(shù)拋出異常錯誤時，返回的promise將會調(diào)用reject方法，所以：

 
 
      
  
  1. // wait ms milliseconds 
    2.   
  
  2. function wait(ms) { 
    3.   
  
  3.   return new Promise(r => setTimeout(r, ms)); 
    4.   
  
  4. } 
    5.   
  
  5.  
    6.   
  
  6. async function hello() { 
    7.   
  
  7.   await wait(500); 
    8.   
  
  8.   return 'world'; 
    9.   
  
  9. }  
    10.

當(dāng)執(zhí)行hello()時，返回一個成功狀態(tài)，并且傳遞的值為world的promise.

 
 
      
  
  1. async function foo() { 
    2.   
  
  2.   await wait(500); 
    3.   
  
  3.   throw Error('bar'); 
    4.   
  
  4. }  
    5.

當(dāng)執(zhí)行hello()時，返回一個失敗狀態(tài)，并且傳遞的值為Error('bar')的promise.

示例2： 響應(yīng)流

在更復(fù)雜點(diǎn)的案例中, async函數(shù)更能體現(xiàn)其優(yōu)越性。假設(shè)我們想要在記錄chunks數(shù)據(jù)時將其變成響應(yīng)流， 并返回最終的信息長度。

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

下面是使用promise的方式：

 
 
      
  
  1. function getResponseSize(url) { 
    2.   
  
  2.   return fetch(url).then(response => { 
    3.   
  
  3.     const reader = response.body.getReader(); 
    4.   
  
  4.     let total = 0; 
    5.   
  
  5.  
    6.   
  
  6.     return reader.read().then(function processResult(result) { 
    7.   
  
  7.       if (result.done) return total; 
    8.   
  
  8.  
    9.   
  
  9.       const value = result.value; 
    10.   
  
  10.       total += value.length; 
    11.   
  
  11.       console.log('Received chunk', value); 
    12.   
  
  12.  
    13.   
  
  13.       return reader.read().then(processResult); 
    14.   
  
  14.     }) 
    15.   
  
  15.   }); 
    16.   
  
  16. }  
    17.

看清楚了，我是 promise “地下黨” Jake Archibald?？吹轿沂窃鯓釉谒鼉?nèi)部調(diào)用 processResult 并建立異步循環(huán)的了嗎?這樣寫讓我覺得自己“很聰明”。但是正如大多數(shù)“聰明的”代碼一樣，你不得不盯著它看很久才能搞清楚它在做什么，就像九十年代的那些魔眼照片一樣。引用

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

 
 
      
  
  1. async function getResponseSize(url) { 
    2.   
  
  2.   const response = await fetch(url); 
    3.   
  
  3.   const reader = response.body.getReader(); 
    4.   
  
  4.   let result = await reader.read(); 
    5.   
  
  5.   let total = 0; 
    6.   
  
  6.  
    7.   
  
  7.   while (!result.done) { 
    8.   
  
  8.     const value = result.value; 
    9.   
  
  9.     total += value.length; 
    10.   
  
  10.     console.log('Received chunk', value); 
    11.   
  
  11.     // get the next result 
    12.   
  
  12.     result = await reader.read(); 
    13.   
  
  13.   } 
    14.   
  
  14.  
    15.   
  
  15.   return total; 
    16.   
  
  16. }  
    17.

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

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

Async 函數(shù)的其他語法

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

箭頭函數(shù)

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

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

對象方法

 
 
      
  
  1. const storage = { 
    2.   
  
  2.   async getAvatar(name) { 
    3.   
  
  3.     const cache = await caches.open('avatars'); 
    4.   
  
  4.     return cache.match(`/avatars/${name}.jpg`); 
    5.   
  
  5.   } 
    6.   
  
  6. }; 
    7.   
  
  7.  
    8.   
  
  8. storage.getAvatar('jaffathecake').then(…);  
    9.

類方法

 
 
      
  
  1. class Storage { 
    2.   
  
  2.   constructor() { 
    3.   
  
  3.     this.cachePromise = caches.open('avatars'); 
    4.   
  
  4.   } 
    5.   
  
  5.  
    6.   
  
  6.   async getAvatar(name) { 
    7.   
  
  7.     const cache = await this.cachePromise; 
    8.   
  
  8.     return cache.match(`/avatars/${name}.jpg`); 
    9.   
  
  9.   } 
    10.   
  
  10. } 
    11.   
  
  11.  
    12.   
  
  12. const storage = new Storage(); 
    13.   
  
  13. storage.getAvatar('jaffathecake').then(…); 
    14.

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

注意!請避免太過強(qiáng)調(diào)順序

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

 
 
      
  
  1. async function series() { 
    2.   
  
  2.   await wait(500); 
    3.   
  
  3.   await wait(500); 
    4.   
  
  4.   return "done!"; 
    5.   
  
  5. }  
    6.

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

 
 
      
  
  1. async function parallel() { 
    2.   
  
  2.  const wait1 = wait(500); 
    3.   
  
  3.  const wait2 = wait(500); 
    4.   
  
  4.  await wait1; 
    5.   
  
  5.  await wait2; 
    6.   
  
  6.  return "done!"; 
    7.   
  
  7. }  
    8.

上面的代碼只需要500ms，因?yàn)閮蓚€wait在同一時間處理了。

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

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

深呼吸....下面就是使用promise來實(shí)現(xiàn)的代碼：

 
 
      
  
  1. function logInOrder(urls) { 
    2.   
  
  2.   // fetch all the URLs 
    3.   
  
  3.   const textPromises = urls.map(url => { 
    4.   
  
  4.     return fetch(url).then(response => response.text()); 
    5.   
  
  5.   }); 
    6.   
  
  6.  
    7.   
  
  7.   // log them in order 
    8.   
  
  8.   textPromises.reduce((chain, textPromise) => { 
    9.   
  
  9.     return chain.then(() => textPromise) 
    10.   
  
  10.       .then(text => console.log(text)); 
    11.   
  
  11.   }, Promise.resolve()); 
    12.   
  
  12. }  
    13.

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

但是，當(dāng)把上面的代碼轉(zhuǎn)換成使用 async函數(shù)來實(shí)現(xiàn)時，它看起來太有順序了，以至于會使我們很迷惑：

:-1: 不推薦 - 過于強(qiáng)調(diào)先后順序

 
 
      
  
  1. async function logInOrder(urls) { 
    2.   
  
  2.   for (const url of urls) { 
    3.   
  
  3.     const response = await fetch(url); 
    4.   
  
  4.     console.log(await response.text()); 
    5.   
  
  5.   } 
    6.   
  
  6. }  
    7.

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

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

 
 
      
  
  1. async function logInOrder(urls) { 
    2.   
  
  2.   // fetch all the URLs in parallel 
    3.   
  
  3.   const textPromises = urls.map(async url => { 
    4.   
  
  4.     const response = await fetch(url); 
    5.   
  
  5.     return response.text(); 
    6.   
  
  6.   }); 
    7.   
  
  7.  
    8.   
  
  8.   // log them in sequence 
    9.   
  
  9.   for (const textPromise of textPromises) { 
    10.   
  
  10.     console.log(await textPromise); 
    11.   
  
  11.   } 
    12.   
  
  12. }  
    13.

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

瀏覽器兼容性和解決方法

在我寫這篇文章時，Chrome 55已經(jīng)默認(rèn)支持async 函數(shù)。但是在所有主流瀏覽器中，它還在開發(fā)中：

  • Edge - In build 14342+ behind a flag
  • Firefox - active development
  • Safari - active development

解決方法 1：Generators

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

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

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

我建議你現(xiàn)在就這樣做，因?yàn)楫?dāng)你的目標(biāo)瀏覽器支持了async函數(shù)時，你只需要將Babel從你的項(xiàng)目中去除即可。但是如果你真的不想使用轉(zhuǎn)換工具，你可以使用Babel's polyfill點(diǎn)擊預(yù)覽。

 
 
      
  
  1. async function slowEcho(val) { 
    2.   
  
  2.   await wait(1000); 
    3.   
  
  3.   return val; 
    4.   
  
  4. }  
    5.

當(dāng)你使用了上面說的polyfill點(diǎn)擊預(yù)覽,你可以將上面的代碼替換為：

 
 
      
  
  1. const slowEcho = createAsyncFunction(function*(val) { 
    2.   
  
  2.   yield wait(1000); 
    3.   
  
  3.   return val; 
    4.   
  
  4. });  
    5.

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

解決方法2： regenerator

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

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

Async all the things!

一旦所有瀏覽器都支持async函數(shù)了，請?jiān)谒蟹祷刂凳莗romise的函數(shù)上使用async!因?yàn)樗粌H可以使你的代碼更tider， 而且它確保了async函數(shù) 總是返回一個 promise 。

回到 2014 年,我對async函數(shù)的出現(xiàn)感到非常激動, 現(xiàn)在很高興看到它們在瀏覽器中被支持了。Whoop!


網(wǎng)站標(biāo)題：[譯]Async函數(shù)，讓promise更友好！
本文URL：http://m.5511xx.com/article/djshoss.html