淺談async函數await用法

来源:https://www.cnblogs.com/jeodeng/archive/2019/04/07/10663869.html
-Advertisement-
Play Games

今天狀態不太好，睡久了懵一天。 以前只是瞭解過async函數，並還沒有很熟練的運用過，所以先開個坑吧，以後再結合實際來更新下，可能說的有些問題希望大家指出。 async和await相信大家應該不陌生，讓非同步處理變得更友好。 其實這玩意兒就是個Generator的語法糖，想深入學習得去看看Genera ...


今天狀態不太好，睡久了懵一天。

以前只是瞭解過async函數，並還沒有很熟練的運用過，所以先開個坑吧，以後再結合實際來更新下，可能說的有些問題希望大家指出。

 

async和await相信大家應該不陌生，讓非同步處理變得更友好。

其實這玩意兒就是個Generator的語法糖，想深入學習得去看看Generator，不然你可能只停留在會用的階段。

用法很簡單，看代碼吧。

// 先聲明一個函數，這個函數返回一個promise, 先記住哈！後面很多地方要用
function getPromise(str = 'sucess') {
  return new Promise((resolve) => {
    setTimeout(() => resolve(str), 1000);
  });
}

// async表示，這個函數有非同步操作！
async function fn() {
  // getPromise會返回一個Promise
  const data = await getPromise();
  // fn運行在這停頓，這裡會停1秒，最後輸出data
  // 要wait等待getPromise()這個非同步操作返回結果
  console.log(data, 'data');

  // 最後返回data，當然你要是處理完業務也可以不返回
  // 視場景而定了，只是想告訴你async會返回一個promise，而這個data在then裡面拿到
  return data;
}

fn().then(res => console.log(res) 'res');

// 這段代碼運行出來兩個sucess

我覺得async最大的好處就是，代碼結構更清晰，有更好的語義，寫複雜業務的時候閱讀起來更快更爽。

接下來模擬一個實際項目的業務場景來看看用法區別

業務場景：我們有一本書，目前只有書名
要通過請求 getBookId 獲取到書的id
然後靠id通過請求 getBookDes 獲取到書的description
最後要把id，和title，還有description一起存到資料庫中 uploadBookInfo

不要糾結http請求如何封裝哈，這裡我直接給幾個模擬例子讓同學們方便試，

// 獲取書籍Id
function getBookId() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('1001'), 1000);
  });
}

// 獲取書籍描述
function getBookDes() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('這是一本好書'), 1000);
  });
}

// 上傳書籍信息
function uploadBookInfo() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('上傳成功'), 1000);
  });
}

// promise寫法
function uploadWidthPromise(title = '你不知道的JavaScript') {
  this.getBookId(title).then((id) => {
    console.log(id); // 1001
    this.getBookDes(id).then((des) => {
      console.log(des); // 這是一本好書
      this.uploadBookInfo({
        title,
        id,
        des,
      }).then((res) => {
        console.log(res); // 上傳成功
      });
    });
  });
}

// async寫法
async function uploadWidthAsync(title = '你不知道的JavaScript') {
  const id = await this.getBookId(title);
  const des = await this.getBookDes(id);
  const result = await this.uploadBookInfo({ id, des, title });
  console.log(id, des, result); // 1001 這是一本好書 上傳成功
},

這明顯的差距啊，以前用回調，後來用promise覺得這個then可真好用啊，非同步完了我就then裡面接著寫，多清晰！

現在有了await，真香！

而且用await你會發現你的代碼執行下來，看起來就像是由上往下執行的順序，一眼就看完這些幹了啥。

 

接下來要說幾點用async函數過程中要註意的東西

劃重點啦！！

1. 錯誤捕捉

await語句後面跟著的promise對象一旦拋出錯誤，也就是變成reject狀態，那麼整個async函數就會停止執行拋出錯誤。

什麼意思呢？

async function thorwErr() {
  await Promise.reject('出錯');
  console.log('執行了嗎？'); // 不會執行，以下代碼都不會執行
  return await Promise.resolve('成功');
},

thorwErr().then((res) => {
  console.log(res); 
  // 成功，並不會彈出，因為第一句awiat已經拋錯，被下麵的catch捕獲，而且async直接停止執行
}).catch((err) => {
  console.log(err); // 出錯
});

// 最後只會輸出兩個字 出錯

那麼這種情況有時候是不符合業務邏輯的，如果我們希望第一句即使出錯也不會中斷，那麼我們需要用到一個try ... catch，如下

async function thorwErr() {
  try {
    await Promise.reject('出錯');
  } catch(err) {
    console.log(err); // 出錯
  }
  console.log('執行了嗎？');
  return await Promise.resolve('成功');
},

這樣寫就會被try...catch捕獲錯誤，而不會被async的catch捕獲造成函數停止執行

最後輸出的也是 出錯 執行了嗎 成功 這樣的三句話

當然也可以換種方式寫，如下

async function thorwErr() {
  await Promise.reject('出錯').catch(err => console.log(err));
  console.log('執行了嗎？');
  return await Promise.resolve('成功');
}

這樣寫也ok，道理是一個道理。錯誤內部直接處理了，不拋給async函數。

在看 阮一峰的ES6 的時候還看到一個例子，我覺得不錯分享給大家。

實現了一個多次嘗試請求，也許會有這種情景，一個第三方介面不太穩定，可能要多次調用才會成功一次，就可以用這種方案解決

const limit_num = 3; // 限制次數 3次

async function test() {
  let i;
  for (i = 0; i < limit_num; ++i) {
    try {
      await getSomething();
      break; // 如果上面那句await成功，就會執行break，失敗就中斷被catch捕捉，再次進入迴圈
    } catch(err) {
      console.log(err);
    }
  }
  console.log(i); // 3
}

test();

2.await只能用於async函數的域裡面 ！！

我就犯了這種錯，上代碼看吧

    async function fn() {
      let arr = [1, 2, 3];

      // 這裡就報錯了 await is a reserved word
      arr.forEach((i) => {
        await getPromise(i);
      });
      // 因為await其實是在一個箭頭函數裡面，並不是用在async函數裡面
    }

那麼正確的寫法如下，也可以理解為await最近的父級函數必須是async函數

    function fn() {
      let arr = [1, 2, 3];

      arr.forEach(async (i) => {
        await this.getPromise(i);
      });
    }

當然，上面這種寫法會有另外一個問題，迴圈三次執行3次await，但是這三個是併發執行，也就是同一時間執行，而不是繼發執行，這裡就要說到我們第三個要註意的點，併發執行和繼發執行（！！劃重點），往下麵看。

3.await的繼發執行和併發執行

我們經常會碰到的一種業務場景，一個頁面要調3個介面，展示3塊數據。那麼如果我用await豈不是要一個一個的等？這樣非常耗時，那麼我們可以這麼寫。

// 這裡的getPromise請看文章最開始的聲明
const [res1, res2] = await Promise.all([getPromise(1), getPromise(2)]);

// 或者下麵這樣寫
const getPromise1 = getPromise(1);
const getPromise2 = getPromise(2);
const res1 = await getPromise1;
const res2 = await getPromise2;

以上寫法就是併發執行，這樣我們就同時做兩個非同步操作並且拿到返回的數據了。

在第二個註意點的最後也留了個疑問，迴圈中繼發執行怎麼做呢？正確的做法是用for迴圈

async function fn() {
  const arr = ['1', '2', '3'];
  console.log(new Date().getTime());
  for(let str of arr) {
    console.log(await this.getPromise(str)); // 每隔1秒輸出，繼發執行
  }
  console.log(new Date().getTime()); // 這裡可以看到比上次輸出 有3秒之差
}

為了大家更直觀的比較，在這裡我再寫一個迴圈的併發執行

async function fn() {
  const arr = ['1', '2', '3'];
  console.log(new Date().getTime());
  for (let promise of arr.map(str => this.getPromise(str))) {
    console.log(await promise); // 同一時間輸出 1，2，3，併發執行
  }
  console.log(new Date().getTime()); // 這裡可以看到比上次輸出 僅有1秒
}

在迴圈中使用await就要比較註意這個併發和繼發了，寫法不對就容易造成未知的bug。

我對Generator還真不太熟，所以我也很納悶為什麼這兩種寫法差別不大卻會造成兩種截然不同的情況，以後看看有沒有必要專門寫一篇針對Generator函數的，或者把這個問題更新在這裡。

所以我覺得不推薦在迴圈中使用await，而且看起來語義化容易混淆，儘量用別的寫法吧。

當然還可以才用Promise.all的寫法了，也是返回一個Promise也可以用await，比較推薦。

 

差不多就這三點需要比較註意的，以後實際運用多了，再更新一些實際運用的場景給大家分享一下。

還希望有大佬可以看到這篇給我解釋一下兩種寫法造成併發和繼發的問題！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • STM32F103/429串口IAP+Ymodem升級
    起因： 串口IAP升級在正點原子的常式中有講解，正點原子的方法是：在RAM中開闢一個120K的數據空間，用來存放bin文件，bin文件通過串口一次性發送到單片機，然後再實現程式的跳轉。但是這種方法在實際項目中並不實用，因為沒用文件校驗，不能保證bin文件的完整性，如果貿然跳轉，將會是設備陷入到永遠無 ...
  • 如何使用redis設計關係資料庫
    redis設計關係資料庫 [toc] 前言 最近需要一張用戶信息表，因為數據量並不大，想先放在記憶體中，等需求變更了，再移到磁碟上，或者往mysql塞，那麼問題來了，怎麼用redis的數據類型設計一個關係資料庫呢。 redis只有key value這種存儲結構，如果想利用它做成想其他資料庫一樣具備 等 ...
  • MongoDB學習（查找文檔和其他數據查找操作）
    理解Cursor對象和查詢運算符 cursor對象 cursor對象相當於一個指針，可通過迭代它來訪問MongdoDB資料庫中的一組對象。 在使用 find() 方法查詢時，返回的並非實際文檔，而是一個Cursor對象，也就是一個指向第一個數據之前的指針。 Cursor對象內部存儲了一個指向當前位置 ...
  • Redis中的執行命令的過程
    在redis.c的initServerConfig()方法中，通過調用dictCreate方法初始化server端的命令表。這個命令表是一個hashtable,可以通過key找到相關的命令： initServer()函數在初始化服務端的基本配置時，已經提前創建了客戶端的回調函數。具體的調用為：1.創 ...
  • Android之Realm詳解
    文章大綱 一、Realm介紹二、Realm實戰三、Realm官方文檔四、項目源碼下載五、參考文章 一、Realm介紹 1. 什麼是Realm Realm 是一個手機資料庫，是用來替代 SQlite 的解決方案，比 SQlite 更輕量級，速度更快，因為它有一套自己的資料庫搜索引擎，並且還具有很多現代 ...
  • 一起學Android之Http訪問
    在Android開發中，一般通過網路進行訪問伺服器端的信息（存儲和檢索網路中的數據），如API介面,WebService，網路圖片等。今天主要講解Http訪問的常用方法，僅供學習分享使用。 ...
  • 解決SpannableString在Android組件間傳遞時顯示失效的問題
    問題：在A activity中傳遞一個SpannableString到B activity中，並最終傳遞到B activity中的TextView中，但是沒有展示出Span效果。 解決：閱讀TextView.setText()方法 看到會根據BufferType對傳入的text重新賦值，於是回溯找到 ...
  • Android進程間通信（一）：AIDL使用詳解
    一、概述 AIDL是Android Interface Definition Language的縮寫，即Android介面定義語言。它是Android的進程間通信比較常用的一種方式。 Android中，每一個進程都有自己的Dalvik VM實例，擁有自己的獨立的記憶體空間，進程與進程之間不共用記憶體，這 ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類