2. 程式人生 > >一個真實的Async/Await示例

一個真實的Async/Await示例

阿新 • • 發佈：2018-02-12
date 開始 val ceo jwt 實的 怎麽辦 都在 state

譯者按： 通過真實的代碼示例感受Async/Await的力量。

  • 原文: Async/await - A thorough example
  • 譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。

既然Node.js 8已經LTS了，我想大家是時候試一試Async/Await特性了，真的很好用！它可以幫助我們用同步的方式寫異步代碼，極大地提高了代碼的可讀性。在過去的2年時間裏，Promise給我們帶來了不少便利，同時也讓我們有一些失望。

這邊博客，我將介紹一個真實的代碼示例，它是一個REST API的controller。通過展示我們如何從Promise切換到async/await，你講能夠體會到Async/Await的神奇之處！

Promise示例

下面是我的工作項目中真實的Controller代碼：

const BPromise = require(‘bluebird‘);

const { WrongCredentialsError, DBConnectionError, EmailError } = require(‘./../errors‘);

/**
 * Emulate an Express.js route call as an example
 */
loginController({}, { json: response => console.log(response) }, null)

function loginController (req, res, err) {
  const { email, password } = req;

  let user;

  BPromise.try(() => validateUserInput(req))
    .then(() => fetchUserByEmail(email))
    .then(fetchedUser => user = fetchedUser)
    .then(() => comparePasswords(req.password, user.password))
    .then(() => markLoggedInTimestamp(user.userId))
    .then(() => sendEmail(user.userId))
    .then(() => generateJWT(user))
    .then(token => res.json({ success: true, token }))
    .catch(WrongCredentialsError, () => res.json({ success: false, error: ‘Invalid email and/or password‘ }))
    .catch(EmailError, DBConnectionError, () => res.json({ success: false, error: ‘Unexpected error, please try again‘ }))
    .catch(() => res.json({ success: false }))
}

/**
 * Validate input from Request
 *
 * @param {Object} input
 * @throws {WrongCredentialsError}
 * @returns {Void}
 */
function validateUserInput(input) {
  if (!input.email || !input.password) {
    throw new WrongCredentialsError();
  }
}

/**
 * Fetch a User from the DB by Email
 *
 * @throws WrongCredentialsError
 * @throws DBConnectionError
 * @returns {BPromise}
 */
function fetchUserByEmail(email) {
  const user = {
    userId: ‘DUMMY_ID‘,
    email: ‘[email protected]‘,
    password: ‘DUMMY_PASSWORD_HASH‘
  }
  return new BPromise(resolve => resolve(user));
}

/**
 * Compare two password
 *
 * @param {String} inputPwd
 * @param {String} storedPwd
 * @throws {WrongCredentialsError}
 * @returns {Void}
 */
function comparePasswords(inputPwd, storedPwd) {
  if (hashPassword(inputPwd) !== storedPwd) {
    throw new WrongCredentialsError();
  }
}

/**
 * Hash password
 *
 * @param {String} password
 * @returns {String}
 */
function hashPassword(password) {
  return password;
}

/**
 * Mark a user‘s logged in timestamp
 *
 * @param {String} userId
 * @throws DBConnectionError
 * @returns {BPromise}
 */
function markLoggedInTimestamp(userId) {
  return new BPromise(resolve => resolve());
}

/**
 * Send a follow up email
 *
 * @param {String} userId
 * @throws EmailError
 * @returns {BPromise}
 */
function sendEmail(userId) {
  return new BPromise(resolve => resolve());
}

/**
 * Generate a JWT token to send to the client
 *
 * @param {Object} user
 * @returns {BPromise<String>}
 */
function generateJWT(user) {
  const token = ‘DUMMY_JWT_TOKEN‘;

  return new BPromise(resolve => resolve(token));
}

一些值得註意的要點：

多余的外層變量

let user;

/* ... */
  .then(fetchedUser => user = fetchedUser)
  /* ... */
  .then(() => sendEmail(user.userId))
  /* ... */

可知，user是一個全局變量，因為我需要在Promise鏈中使用它。如果不希望定義多余的外層變量，則需要在Promise鏈中的每一個函數中都返回user變量，這樣做顯然更加糟糕。

煩人的Promise鏈

/* ... */
BPromise.try(() => validateUserInput(req))
/* ... */

一個Promise鏈必須從Promise開始，但是validateUserInput函數並沒有返回Promise，這時需要使用Bluebird。我也知道這樣寫比較奇怪…

討厭的Bluebird

我在很多地方都使用了Bluebird，如果不用它的話，代碼會更加臃腫。所謂DRY，即Don’t repeat yourself，我們可以使用Bluebird去盡量簡化代碼。但是，Bluebird是一個第三方依賴，如果出問題了怎麽辦？去掉Bluebird應該更好！

JavaScript太靈(gui)活(yi)了，出了BUG你也不知道，不妨接入Fundebug線上實時監控。

Async/Await示例

當我放棄Promise，使用Async/Await之後，代碼是這樣的：

const { WrongCredentialsError, DBConnectionError, EmailError } = require(‘./../errors‘);

/**
 * Emulate an Express.js route call as an example
 */
loginController({}, { json: response => console.log(response) }, null)

/**
 *
 * @param {Object} req
 * @param {Object} res
 * @param {Object} err
 * @returns {Void}
 */
async function loginController(req, res, err) {
  const { email, password } = req.email;

  try {
    if (!email || !password) {
      throw new WrongCredentialsError();
    }

    const user = await fetchUserByEmail(email);

    if (user.password !== hashPassword(req.password)) {
      throw new WrongCredentialsError();
    }

    await markLoggedInTimestamp(user.userId);
    await sendEmail(user.userId);

    const token = await generateJWT(user);

    res.json({ success: true, token });

  } catch (err) {
    if (err instanceof WrongCredentialsError) {
      res.json({ success: false, error: ‘Invalid email and/or password‘ })
    } else if (err instanceof DBConnectionError || err instanceof EmailError) {
      res.json({ success: false, error: ‘Unexpected error, please try again‘ });
    } else {
      res.json({ success: false })
    }
  }
}

/**
 * Fetch a User from the DB by Email
 *
 * @throws WrongCredentialsError
 * @throws DBConnectionError
 * @returns {Promise}
 */
function fetchUserByEmail(email) {
  const user = {
    userId: ‘DUMMY_ID‘,
    email: ‘[email protected]‘,
    password: ‘DUMMY_PASSWORD_HASH‘
  }
  return new Promise(resolve => resolve(user));
}

/**
 * Hash password
 *
 * @param {String} password
 * @returns {String}
 */
function hashPassword(password) {
  return password;
}

/**
 * Mark a user‘s logged in timestamp
 *
 * @param {String} userId
 * @throws DBConnectionError
 * @returns {Promise}
 */
function markLoggedInTimestamp(userId) {
  return new Promise(resolve => resolve());
}

/**
 * Send a follow up email
 *
 * @param {String} userId
 * @throws EmailError
 * @returns {Promise}
 */
function sendEmail(userId) {
  return new Promise(resolve => resolve());
}

/**
 * Generate a JWT token to send to the client
 *
 * @param {Object} user
 * @returns {Promise<String>}
 */
function generateJWT(user) {
  const token = ‘DUMMY_JWT_TOKEN‘;

  return new Promise(resolve => resolve(token));
}

哈哈！！！

沒有外層變量

現在，所有函數都在同一個作用域中調用，不再需要.then函數。因此，我們不再需要定義多余的全局變量，也不需要做多余的變量賦值。

沒有多余的函數

Promise示例中的同步函數validateInput和comparePasswords的代碼可以與異步函數寫在一起，因此可以不再需要定義單獨的函數，代碼更少。

可讀性更高

異步代碼采用同步方式來寫，同時減少了代碼量，可讀性大大提高。

不再需要Bluebird

原生的Promise可以替代Bluebird，且不再需要Bluebird的try方法了。

結論

作為程序員，我們應該努力完善代碼。Async/Await可以帶來很大好處，幫助我們寫出可讀性更高的代碼。如果你堅持使用Promise，不妨看看如何在Promise鏈中共享變量？。

如果你對Async/Await感興趣的話，可以看看這些博客：

  • 重構：從Promise到Async/Await
  • Async/Await替代Promise的6個理由
  • Async/Await是這樣簡化JavaScript代碼的

技術分享圖片 

版權聲明:
轉載時請註明作者Fundebug以及本文地址：
https://blog.fundebug.com/2018/01/31/a-real-async-await-example/

一個真實的Async/Await示例

相關推薦

一個真實的Async/Await示例

date 開始 val ceo jwt 實的 怎麽辦 都在 state 譯者按： 通過真實的代碼示例感受Async/Await的力量。 原文: Async/await - A thorough example 譯者: Fundebug 為了保證可讀性，本文采用意譯而非直

使用Promise和async-await實現的一個非同步遍歷+同步執行任務的例項

假設我們需要做N個同樣的檢測任務，檢測完成後會將結果存入資料庫。 我們希望每個檢測是同步完成的，完成後再進行儲存。 同時，我們又希望這些任務一起開始執行。 不需要檢查這些任務何時完畢。 /** * 檢測一個介面，返回檢測結果 * @param h

async await Task

對象 hello cnblogs using 指定 順序 arp 等待 con 一、使用Task 引用命名空間 using System.Threading.Tasks; 1.工廠方式 Task.Factory.StartNew(() => {Console.W

async await的使用

con span sleep 使用 color console syn start nbsp var sleep = function (time) { return new Promise(function (resolve, reject) {

一個簡單的MapReduce示例（多個MapReduce任務處理）

.lib exceptio apr private util sum length reat lin 一、需求 　　有一個列表，只有兩列：id、pro，記錄了id與pro的對應關系，但是在同一個id下，pro有可能是重復的。 　　現在需要寫一個程序，統計一下每個id下有

[Node] Catch error for async await

mongodb color def .post direct express cnblogs err n) When we try to do MongoDB opration, mongoose return Promise, we can use async/await

async await promise

log 也有 ons new 一行代碼 ole nbsp blog 沒有 async 異步函數，以後可能會用得很廣。 1、箭頭函數： 沒有{}時不寫return 也有返回值 2、Promise ： 異步神器，很多異步api都是基於Promise 3、new Promise(

開發一個微笑小程序示例

文件中 掃描二維碼 show lex img tex ext 調試工具 let 一、註冊小程序賬號 1.進入微信公眾平臺（https://mp.weixin.qq.com/），註冊小程序賬號，根據提示填寫對應的信息即可。2.註冊成功後進入首頁，在 小程序發布流程->

理解ES7中的async/await

def 需求 一個表 來看 1-1 運算符 get 執行 表達 理解ES7中的async/await 優勢是：就是解決多層異步回調的嵌套 　從字面上理解 async/await， async是 "異步"的含義，await可以認為是 async wait的簡寫，因此

C# Async Await

ati style ren console man stat tel current spa #region Async、Await static void Async() { Async1();

ES7 Async/Await 陷阱

average 模式 時間 eth 復雜 簡化 同時 不同的 then 什麽是Async/Await ES6新增了Promise函數用於簡化項目代碼流程。然而在使用promise時，我們仍然要使用callback，並且並不知道程序要幹什麽，例如： function doS

JavaScript 的 async/await

處理 這也 現在 err 並且 舉例 block opera script 隨著 Node 7 的發布，越來越多的人開始研究據說是異步編程終級解決方案的 async/await。 異步編程的最高境界，就是根本不用關心它是不是異步。 async 函數就是隧道盡頭的亮光，很多人

scikit-learn初步，一個KNN算法示例

一個 port 算法 ict 分割 pan sele lec tar 1 import numpy as np 2 from sklearn import datasets #數據集 3 from sklearn.model_selection import tra

async, await運用

{} 函數聲明 並行 his const promise code 中斷 async 1.async 函數聲明及調用方式： 1 // async 函數聲明,調用 2 const a1 = async() => { 3 console.log("this

js callback promise async await 幾種異步函數處理方式

turn 局部變量 兩個 ron 並發 返回 nbsp 狀態 代碼 ***callback 這個是最常用的也是最簡單的 ,比如在ajax網絡請求中,返回請求完成返回的數據 回調函數就是把一個函數當成另一個函數的參數,可以傳遞函數內的局部變量,也可以異步完成一些操作,在函數

C#異步中的Task,async,await

string con get 結果 brush 異步回調 pre result ring class Program { static void Main(string[] args) {

asp.net 異步(async/await)中訪問HttpContext的問題

ext session 包括 sys part tip 類庫 異步 pre 以web api上傳文件的官方例子為例： await Request.Content.ReadAsMultipartAsync(provider); 項目裏面多處用到session，包括

使用async await完成： 等到task線程內任務結束 交給主線程處理事情 task線程內不會出現卡死現象

syn log ini 正常 註意 style 結束 void oid private async void DoSomething() { await Task.Run(() => { Thread.Sleep(5000);

理解 JavaScript 的 async/await

then 容易 幹什麽 nodejs 比較 lock cto res 信息 隨著 Node 7 的發布，越來越多的人開始研究據說是異步編程終級解決方案的 async/await。我第一次看到這組關鍵字並不是在 JavaScript 語言裏，而是在 c# 5.0 的語法中。C

從不用 try-catch 實現的 async/await 語法說錯誤處理

ret syn eject 沒有 有意 som else 回調地獄 try-catch 前不久看到 Dima Grossman 寫的 How to write async await without try-catch blocks in Javascript。看到標題的時