async await 個人總結

junnplus 發布于2019-08-23 13:43 / 2795人閱讀

摘要：認識首先要從單個熟悉官方介紹聲明將定義一個返回對象的異步函數。

認識async await 首先要從單個熟悉

async

官方介紹：
async function?聲明將定義一個返回?AsyncFunction?對象的異步函數。
個人理解：

1. 首先`async function`會申明定義一個異步執行的函數，無阻塞，不會阻塞后面代碼執行
2. 該函數的返回值是一個Promise對象

執行以下代碼

async function testAsync() {
    return "茶樹菇"
  }
  console.log(testAsync());
/*打印結果：
Promise
result: "茶樹菇"
status: "resolved"
“Promise”原型*/

打印結果可以看出，async 可以將其后的函數執行結果轉為Promise對象
既然如此那以下操作也是可行的

testAsync().then(r => {
    console.log(r);
  });//"茶樹菇"

由以下打印結果可知async function聲明函數是異步函數

function t() {
  return new Promise(resolve => {
    resolve("hah")
  })
}
async function t1() {
  const a = await t()
  // console.log(a);
  console.log("t1函數里");
}
t1()
console.log("我在t1函數調用后");
/*打印結果：
[Log] 我在t1函數調用后
[Log] t1函數里
*/

await

官方介紹：
await? 操作符用于等待一個Promise?對象。它只能在異步函數?async function?中使用。

個人理解：
官方注釋await是在等待一個Promise對象，其實沒有限制，只是根據等待到的結果類型的不同有不同的操作，如果等到的就是個結果，則await就返回這個值，如果等到的是一Promise對象，則await會阻塞后面代碼執行，等待Promise的結果（由于await在async function申明的異步執行函數，所以不會影響該函數外的其他代碼執行，只影響內部）
注意：如果await等待的Promise執行結果除了resolve外，還有異常處理reject，則最好用.catch(err => err)去接收處理異常，例const a = await t().catch(err => err)

async function testAsync1() {
    return "茶樹菇";
}

function testAsync2() {
    return new Promise(resolve => {
      resolve("茶樹菇")
    })
}

function testAsync3() {
    return "茶樹菇";
}

async function testFn() {
    const v1 = await testAsync1();
    const v2 = await testAsync2();
    const v3 = await testAsync3();
    console.log(v1);//"茶樹菇"
    console.log(v2);//"茶樹菇"
    console.log(v3);//"茶樹菇"
//由此可見`await`等待的不一定是個`Promise`對象，也可以是個值
}
testFn();

為什么用async await，對比Promise的優缺點在哪？

模擬個使用場景，如下代碼
需求：隨機產生一個1～2之間的隨機數，用延時器模擬異步操作，判斷該值，如果小于一就成功，大于一失敗

//用Promise實現：
function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    console.log("隨機數為：" + timeOut);
    setTimeout(function() {
      if (timeOut < 1) {
        resolve("小于1, 成功")
      } else {
        reject("大于1,失敗")
      }
    }, timeOut * 1000)
  }
  new Promise(test).then((result) => {
    console.log(result);
  }).catch((reason) => {
    console.log(reason);
  })

打印結果：

function test2() {
    var timeOut = Math.random() * 2;
    console.log("隨機數為：" + timeOut);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (timeOut < 1) {
          resolve("小于1, 成功")
        } else {
          reject("大于1,失敗")
        }
      }, 1000)
    })
  }
  async function asyncFn() {
    const v3 = await test2().catch(er => er)
    console.log(v3);
  }
  asyncFn()

看代碼其實單一的異步處理鏈并不能看出async await的優勢，但是如果需要處理多個Promise組成的處理鏈，就能看出區別
假設需求為：分布完成，每一步都需要上一步的結果：

//每次調用時間都增加200
function logTimeOut(n) {
    return new Promise(resolve => {
      setTimeout(() => resolve(n + 200), n)
    })
  }
//第一步
  function stepOne(n) {
    console.log("第一步所用的時間", n);
    return logTimeOut(n)
  }
//第二步將第一步的結果加上200作為第二部的初始時間
  function stepTow(m, n) {
    console.log("第二部所用的時間",m, n);
    return logTimeOut(n + m)
  }
//第三步將第二步的結果加上200作為第三步的初始時間
  function stepThree(k, m, n) {
    console.log("第三部所用的時間", k, m, n);
    return logTimeOut(k + m + n)
  }

首先用Promise實現

//promise實現
  function doIt() {
    console.time("doIt");
    // 第一步初始時間
    const time1 = 200;
    stepOne(time1).then(time2 => {
      return stepTow(time1, time2).then(time3 => [time1, time2, time3])
    })
    .then(timeArr => {
      const [time1, time2, time3] = timeArr
      return stepThree(time1, time2, time3)
    })
    .then(result => {
      console.log("總共計算用時", result);
      console.timeEnd("doIt")
    })
  }
doIt()

使用async awiat：

// async await 實現
  async function startIt() {
    console.time("startIt")
    const time1 = 200;
    const time2 = await stepOne(time1)
    const time3 = await stepTow(time1, time2)
    const result = await stepThree(time1, time2, time3)
    console.log("總共計算用時", result);
    console.timeEnd("startIt")
  }

打印結果：

這樣對比就能明顯看出區別Promise實現的代碼邏輯復雜，不清晰，不直觀，而通過async await，可以將異步邏輯，用類似于同步的代碼實現，簡潔明了

這是到目前為止的個人理解，轉載請標明出處

GPU云服務器云服務器 async await await-async async-await 個人總結

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99447.html

async/await 異步應用的常用場景

摘要：下面將簡單地描述一下一些日常常用場景加深對認識最普遍的異步操作就是請求我們也可以用來簡單模擬異步請求。其中是必須的如果省略了程序就不能按預期得到結果。前言 async/await 語法用看起來像寫同步代碼的方式來優雅地處理異步操作,但是我們也要明白一點,異步操作本來帶有復雜性,像寫同步代碼的方式并不能降低本質上的復雜性,所以在處理上我們要更加謹慎, 稍有不慎就可能寫出不是預期執行的代...

ermaoL 2019-08-02 16:18 評論0 收藏0
async/await 異步應用的常用場景

摘要：下面將簡單地描述一下一些日常常用場景加深對認識最普遍的異步操作就是請求我們也可以用來簡單模擬異步請求。其中是必須的如果省略了程序就不能按預期得到結果。前言 async/await 語法用看起來像寫同步代碼的方式來優雅地處理異步操作,但是我們也要明白一點,異步操作本來帶有復雜性,像寫同步代碼的方式并不能降低本質上的復雜性,所以在處理上我們要更加謹慎, 稍有不慎就可能寫出不是預期執行的代...

darkbug 2019-08-26 13:45 評論0 收藏0
async/await 異步應用的常用場景

摘要：下面將簡單地描述一下一些日常常用場景加深對認識最普遍的異步操作就是請求我們也可以用來簡單模擬異步請求。其中是必須的如果省略了程序就不能按預期得到結果。前言 async/await 語法用看起來像寫同步代碼的方式來優雅地處理異步操作,但是我們也要明白一點,異步操作本來帶有復雜性,像寫同步代碼的方式并不能降低本質上的復雜性,所以在處理上我們要更加謹慎, 稍有不慎就可能寫出不是預期執行的代...

寵來也 2019-08-30 10:53 評論0 收藏1
小程序開發技巧總結

摘要：前言最近公司要開發一款電商小程序，匆忙看了一遍文檔就開始干活了。整體開發體驗個人感覺不太好，特別是如果之前習慣了開發，突然去開發小程序，感覺很雞肋。前言最近公司要開發一款電商小程序，匆忙看了一遍文檔就開始干活了。整體開發體驗個人感覺不太好，特別是如果之前習慣了Vue開發，突然去開發小程序，感覺很雞肋。以下是我在開發中遇到的一些問題以及解決方法的總結，僅供參考引入iconfont ...

Wuv1Up 2019-08-22 18:48 評論0 收藏0
異步等待的 Python 協程

摘要：輔之以事件循環，協程可用于異步處理，尤其是在中。當前支持的協程基于增強型生成器，于版本開始采用。新的特性中，異步還有兩種新用途異步內容管理器和迭代器。現在 Python 已經支持用協程進行異步處理。但最近有建議稱添加協程以全面完善 Python 的語言結構，而不是像現在這樣把他們作為生成器的一個類型。此外，兩個新的關鍵字———異步(async)和等待(await)，都該添加到 Pyt...

NicolasHe 2019-07-24 18:05 評論0 收藏0