ES6 系列之我們來聊聊 Async

Songlcy 發(fā)布于2019-08-23 12:30 / 3375人閱讀

摘要：標(biāo)準(zhǔn)引入了函數(shù)，使得異步操作變得更加方便。在異步處理上，函數(shù)就是函數(shù)的語法糖。在實(shí)際項(xiàng)目中，錯(cuò)誤處理邏輯可能會(huì)很復(fù)雜，這會(huì)導(dǎo)致冗余的代碼。的出現(xiàn)使得就可以捕獲同步和異步的錯(cuò)誤。如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤剑?qǐng)務(wù)必給予指正，十分感謝。

async

ES2017 標(biāo)準(zhǔn)引入了 async 函數(shù)，使得異步操作變得更加方便。

在異步處理上，async 函數(shù)就是 Generator 函數(shù)的語法糖。

舉個(gè)例子：

// 使用 generator
var fetch = require("node-fetch");
var co = require("co");

function* gen() {
    var r1 = yield fetch("https://api.github.com/users/github");
    var json1 = yield r1.json();
    console.log(json1.bio);
}

co(gen);

當(dāng)你使用 async 時(shí)：

// 使用 async
var fetch = require("node-fetch");

var fetchData = async function () {
    var r1 = await fetch("https://api.github.com/users/github");
    var json1 = await r1.json();
    console.log(json1.bio);
};

fetchData();

其實(shí) async 函數(shù)的實(shí)現(xiàn)原理，就是將 Generator 函數(shù)和自動(dòng)執(zhí)行器，包裝在一個(gè)函數(shù)里。

async function fn(args) {
  // ...
}

// 等同于

function fn(args) {
  return spawn(function* () {
    // ...
  });
}

spawn 函數(shù)指的是自動(dòng)執(zhí)行器，就比如說 co。

再加上 async 函數(shù)返回一個(gè) Promise 對(duì)象，你也可以理解為 async 函數(shù)是基于 Promise 和 Generator 的一層封裝。

async 與 Promise

嚴(yán)謹(jǐn)?shù)恼f，async 是一種語法，Promise 是一個(gè)內(nèi)置對(duì)象，兩者并不具備可比性，更何況 async 函數(shù)也返回一個(gè) Promise 對(duì)象……

這里主要是展示一些場景，使用 async 會(huì)比使用 Promise 更優(yōu)雅的處理異步流程。

1. 代碼更加簡潔

/**
 * 示例一
 */
function fetch() {
  return (
    fetchData()
    .then(() => {
      return "done"
    });
  )
}

async function fetch() {
  await fetchData()
  return "done"
};

/**
 * 示例二
 */
function fetch() {
  return fetchData()
  .then(data => {
    if (data.moreData) {
        return fetchAnotherData(data)
        .then(moreData => {
          return moreData
        })
    } else {
      return data
    }
  });
}

async function fetch() {
  const data = await fetchData()
  if (data.moreData) {
    const moreData = await fetchAnotherData(data);
    return moreData
  } else {
    return data
  }
};

/**
 * 示例三
 */
function fetch() {
  return (
    fetchData()
    .then(value1 => {
      return fetchMoreData(value1)
    })
    .then(value2 => {
      return fetchMoreData2(value2)
    })
  )
}

async function fetch() {
  const value1 = await fetchData()
  const value2 = await fetchMoreData(value1)
  return fetchMoreData2(value2)
};

2. 錯(cuò)誤處理

function fetch() {
  try {
    fetchData()
      .then(result => {
        const data = JSON.parse(result)
      })
      .catch((err) => {
        console.log(err)
      })
  } catch (err) {
    console.log(err)
  }
}

在這段代碼中，try/catch 能捕獲 fetchData() 中的一些 Promise 構(gòu)造錯(cuò)誤，但是不能捕獲 JSON.parse 拋出的異常，如果要處理 JSON.parse 拋出的異常，需要添加 catch 函數(shù)重復(fù)一遍異常處理的邏輯。

在實(shí)際項(xiàng)目中，錯(cuò)誤處理邏輯可能會(huì)很復(fù)雜，這會(huì)導(dǎo)致冗余的代碼。

async function fetch() {
  try {
    const data = JSON.parse(await fetchData())
  } catch (err) {
    console.log(err)
  }
};

async/await 的出現(xiàn)使得 try/catch 就可以捕獲同步和異步的錯(cuò)誤。

3. 調(diào)試

const fetchData = () => new Promise((resolve) => setTimeout(resolve, 1000, 1))
const fetchMoreData = (value) => new Promise((resolve) => setTimeout(resolve, 1000, value + 1))
const fetchMoreData2 = (value) => new Promise((resolve) => setTimeout(resolve, 1000, value + 2))

function fetch() {
  return (
    fetchData()
    .then((value1) => {
      console.log(value1)
      return fetchMoreData(value1)
    })
    .then(value2 => {
      return fetchMoreData2(value2)
    })
  )
}

const res = fetch();
console.log(res);

因?yàn)?then 中的代碼是異步執(zhí)行，所以當(dāng)你打斷點(diǎn)的時(shí)候，代碼不會(huì)順序執(zhí)行，尤其當(dāng)你使用 step over 的時(shí)候，then 函數(shù)會(huì)直接進(jìn)入下一個(gè) then 函數(shù)。

const fetchData = () => new Promise((resolve) => setTimeout(resolve, 1000, 1))
const fetchMoreData = () => new Promise((resolve) => setTimeout(resolve, 1000, 2))
const fetchMoreData2 = () => new Promise((resolve) => setTimeout(resolve, 1000, 3))

async function fetch() {
  const value1 = await fetchData()
  const value2 = await fetchMoreData(value1)
  return fetchMoreData2(value2)
};

const res = fetch();
console.log(res);

而使用 async 的時(shí)候，則可以像調(diào)試同步代碼一樣調(diào)試。

async 地獄

async 地獄主要是指開發(fā)者貪圖語法上的簡潔而讓原本可以并行執(zhí)行的內(nèi)容變成了順序執(zhí)行，從而影響了性能，但用地獄形容有點(diǎn)夸張了點(diǎn)……

例子一

舉個(gè)例子：

(async () => {
  const getList = await getList();
  const getAnotherList = await getAnotherList();
})();

getList() 和 getAnotherList() 其實(shí)并沒有依賴關(guān)系，但是現(xiàn)在的這種寫法，雖然簡潔，卻導(dǎo)致了 getAnotherList() 只能在 getList() 返回后才會(huì)執(zhí)行，從而導(dǎo)致了多一倍的請(qǐng)求時(shí)間。

為了解決這個(gè)問題，我們可以改成這樣：

(async () => {
  const listPromise = getList();
  const anotherListPromise = getAnotherList();
  await listPromise;
  await anotherListPromise;
})();

也可以使用 Promise.all()：

(async () => {
  Promise.all([getList(), getAnotherList()]).then(...);
})();

例子二

當(dāng)然上面這個(gè)例子比較簡單，我們?cè)賮頂U(kuò)充一下：

(async () => {
  const listPromise = await getList();
  const anotherListPromise = await getAnotherList();

  // do something

  await submit(listData);
  await submit(anotherListData);

})();

因?yàn)?await 的特性，整個(gè)例子有明顯的先后順序，然而 getList() 和 getAnotherList() 其實(shí)并無依賴，submit(listData) 和 submit(anotherListData) 也沒有依賴關(guān)系，那么對(duì)于這種例子，我們?cè)撛趺锤膶懩兀?/p>

基本分為三個(gè)步驟：

1. 找出依賴關(guān)系

在這里，submit(listData) 需要在 getList() 之后，submit(anotherListData) 需要在 anotherListPromise() 之后。

2. 將互相依賴的語句包裹在 async 函數(shù)中

async function handleList() {
  const listPromise = await getList();
  // ...
  await submit(listData);
}

async function handleAnotherList() {
  const anotherListPromise = await getAnotherList()
  // ...
  await submit(anotherListData)
}

3.并發(fā)執(zhí)行 async 函數(shù)

async function handleList() {
  const listPromise = await getList();
  // ...
  await submit(listData);
}

async function handleAnotherList() {
  const anotherListPromise = await getAnotherList()
  // ...
  await submit(anotherListData)
}

// 方法一
(async () => {
  const handleListPromise = handleList()
  const handleAnotherListPromise = handleAnotherList()
  await handleListPromise
  await handleAnotherListPromise
})()

// 方法二
(async () => {
  Promise.all([handleList(), handleAnotherList()]).then()
})()

繼發(fā)與并發(fā)

問題：給定一個(gè) URL 數(shù)組，如何實(shí)現(xiàn)接口的繼發(fā)和并發(fā)？

async 繼發(fā)實(shí)現(xiàn)：

// 繼發(fā)一
async function loadData() {
  var res1 = await fetch(url1);
  var res2 = await fetch(url2);
  var res3 = await fetch(url3);
  return "whew all done";
}

// 繼發(fā)二
async function loadData(urls) {
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.text());
  }
}

async 并發(fā)實(shí)現(xiàn)：

// 并發(fā)一
async function loadData() {
  var res = await Promise.all([fetch(url1), fetch(url2), fetch(url3)]);
  return "whew all done";
}

// 并發(fā)二
async function loadData(urls) {
  // 并發(fā)讀取 url
  const textPromises = urls.map(async url => {
    const response = await fetch(url);
    return response.text();
  });

  // 按次序輸出
  for (const textPromise of textPromises) {
    console.log(await textPromise);
  }
}

async 錯(cuò)誤捕獲

盡管我們可以使用 try catch 捕獲錯(cuò)誤，但是當(dāng)我們需要捕獲多個(gè)錯(cuò)誤并做不同的處理時(shí)，很快 try catch 就會(huì)導(dǎo)致代碼雜亂，就比如：

async function asyncTask(cb) {
    try {
       const user = await UserModel.findById(1);
       if(!user) return cb("No user found");
    } catch(e) {
        return cb("Unexpected error occurred");
    }

    try {
       const savedTask = await TaskModel({userId: user.id, name: "Demo Task"});
    } catch(e) {
        return cb("Error occurred while saving task");
    }

    if(user.notificationsEnabled) {
        try {
            await NotificationService.sendNotification(user.id, "Task Created");
        } catch(e) {
            return cb("Error while sending notification");
        }
    }

    if(savedTask.assignedUser.id !== user.id) {
        try {
            await NotificationService.sendNotification(savedTask.assignedUser.id, "Task was created for you");
        } catch(e) {
            return cb("Error while sending notification");
        }
    }

    cb(null, savedTask);
}

為了簡化這種錯(cuò)誤的捕獲，我們可以給 await 后的 promise 對(duì)象添加 catch 函數(shù)，為此我們需要寫一個(gè) helper:

// to.js
export default function to(promise) {
   return promise.then(data => {
      return [null, data];
   })
   .catch(err => [err]);
}

整個(gè)錯(cuò)誤捕獲的代碼可以簡化為：

import to from "./to.js";

async function asyncTask() {
     let err, user, savedTask;

     [err, user] = await to(UserModel.findById(1));
     if(!user) throw new CustomerError("No user found");

     [err, savedTask] = await to(TaskModel({userId: user.id, name: "Demo Task"}));
     if(err) throw new CustomError("Error occurred while saving task");

    if(user.notificationsEnabled) {
       const [err] = await to(NotificationService.sendNotification(user.id, "Task Created"));
       if (err) console.error("Just log the error and continue flow");
    }
}

async 的一些討論 async 會(huì)取代 Generator 嗎？

Generator 本來是用作生成器，使用 Generator 處理異步請(qǐng)求只是一個(gè)比較 hack 的用法，在異步方面，async 可以取代 Generator，但是 async 和 Generator 兩個(gè)語法本身是用來解決不同的問題的。

async 會(huì)取代 Promise 嗎？

async 函數(shù)返回一個(gè) Promise 對(duì)象

面對(duì)復(fù)雜的異步流程，Promise 提供的 all 和 race 會(huì)更加好用

Promise 本身是一個(gè)對(duì)象，所以可以在代碼中任意傳遞

async 的支持率還很低，即使有 Babel，編譯后也要增加 1000 行左右。

參考

(譯) 6 個(gè) Async/Await 優(yōu)于 Promise 的方面

(譯) 如何逃離 async/await 地獄

精讀《async/await 是把雙刃劍》

ECMAScript 6 入門

How to write async await without try-catch blocks in Javascript

ES6 系列

ES6 系列目錄地址：https://github.com/mqyqingfeng/Blog

ES6 系列預(yù)計(jì)寫二十篇左右，旨在加深 ES6 部分知識(shí)點(diǎn)的理解，重點(diǎn)講解塊級(jí)作用域、標(biāo)簽?zāi)０?、箭頭函數(shù)、Symbol、Set、Map 以及 Promise 的模擬實(shí)現(xiàn)、模塊加載方案、異步處理等內(nèi)容。

如果有錯(cuò)誤或者不嚴(yán)謹(jǐn)?shù)牡胤?，?qǐng)務(wù)必給予指正，十分感謝。如果喜歡或者有所啟發(fā)，歡迎 star，對(duì)作者也是一種鼓勵(lì)。

云服務(wù)器 GPU云服務(wù)器 es6-系列系列之系列之二架構(gòu)之坑系列

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/98642.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Songlcy

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

奈學(xué)百萬業(yè)務(wù)架構(gòu)師

閱讀 1740·2021-11-25 09:43
#黑五#GreenGeeks：美國/加拿大/荷蘭虛擬主機(jī)25折優(yōu)惠，購買送1年免費(fèi)域名

閱讀 1785·2021-11-24 10:41
【動(dòng)態(tài)內(nèi)存管理】動(dòng)態(tài)內(nèi)存分配、常見錯(cuò)誤、經(jīng)典筆試題、柔性數(shù)組

閱讀 3105·2021-09-27 13:36
JS基礎(chǔ)入門篇（二十四）—DOM（上）

閱讀 811·2019-08-30 15:53
html的幾種水平垂直居中的方式（基礎(chǔ)）

閱讀 3567·2019-08-30 15:44
CSS 選擇器，一篇就夠了

閱讀 866·2019-08-30 14:03
CSS實(shí)現(xiàn)導(dǎo)航欄點(diǎn)擊選中

閱讀 2572·2019-08-29 16:38
下個(gè)時(shí)代的前端研發(fā)，效率還能提升。PxCook 3.0，最高效的設(shè)計(jì)研發(fā)利器

閱讀 996·2019-08-29 13:23

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

ES6 系列之我們來聊聊 Async

相關(guān)文章

ES6 完全使用手冊(cè)

前端進(jìn)階資源整理

javascript異步與promise

ES6 系列之我們來聊聊裝飾器

ES6 系列之我們來聊聊 Promise

發(fā)表評(píng)論

0條評(píng)論

Songlcy

男|高級(jí)講師

TA的文章

奈學(xué)百萬業(yè)務(wù)架構(gòu)師

#黑五#GreenGeeks：美國/加拿大/荷蘭虛擬主機(jī)25折優(yōu)惠，購買送1年免費(fèi)域名

【動(dòng)態(tài)內(nèi)存管理】動(dòng)態(tài)內(nèi)存分配、常見錯(cuò)誤、經(jīng)典筆試題、柔性數(shù)組

JS基礎(chǔ)入門篇（二十四）—DOM（上）

html的幾種水平垂直居中的方式（基礎(chǔ)）

CSS 選擇器，一篇就夠了

CSS實(shí)現(xiàn)導(dǎo)航欄點(diǎn)擊選中

下個(gè)時(shí)代的前端研發(fā)，效率還能提升。PxCook 3.0，最高效的設(shè)計(jì)研發(fā)利器

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

ES6 系列之我們來聊聊 Async

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！