關(guān)于Js的promise、generator、async、await

關(guān)于Js的promise、generator、async、await

第一章 前言

? 大家都知道Javascript是單線程的，而且他的耗時(shí)操作是異步的，比如網(wǎng)絡(luò)請(qǐng)求以及IO操作。在一般來說，我們比較喜歡他的異步，因?yàn)楫惒叫时容^高，資源得到了合理的利用，但是有的時(shí)候我們?yōu)榱丝刂屏鞒?，而且流程里面存在一些耗時(shí)操作，如果還是使其異步的話就會(huì)使得我們的流程非常難控制，所以這個(gè)時(shí)候我們就要同步執(zhí)行我們的耗時(shí)操作。

第二章 關(guān)于單線程

? 有的時(shí)候我會(huì)想，javascript既然是單線程的，那為什么他又可以異步的呢？(因?yàn)樽鳛樾“椎奈业恼J(rèn)知來說，異步就是開個(gè)新的線程去執(zhí)行這個(gè)耗時(shí)任務(wù) o(╥﹏╥)o)

? 這里就有一個(gè)主線程的概念了，所謂單線程就是Javascript 引擎在解釋、處理javascript代碼的線程只有一個(gè)，這個(gè)線程就是主線程。實(shí)際上瀏覽器還存在其他線程，比如處理網(wǎng)絡(luò)請(qǐng)求、處理DOM等的線程，這些線程稱為工作線程，這里說的單線程的意思是javascript無論什么時(shí)候都只有一個(gè)線程在運(yùn)行javascript程序

這樣的好處就是javascript的單線程簡(jiǎn)化了處理事件的機(jī)制，不必理會(huì)資源競(jìng)爭(zhēng)和線程同步這些復(fù)雜的問題。

第三章 關(guān)于同步、異步、阻塞、非阻塞

同步和異步關(guān)注的是消息通信機(jī)制 (synchronous communication/ asynchronous communication)

阻塞和非阻塞關(guān)注的是程序在等待調(diào)用結(jié)果（消息，返回值）時(shí)的狀態(tài).

  • 同步

    同步就是程序一行一行的執(zhí)行代碼，只有等上一行的代碼執(zhí)行完了，才會(huì)繼續(xù)執(zhí)行下一行代碼

    function sync{
  console.log("1")
  console.log("2")
  console.log("3")
  console.log("4")
  console.log("5")
}
sync() // 輸出 1，2，3，4，5

  • 阻塞

    阻塞調(diào)用是指在返回結(jié)果之前，程序會(huì)等待這個(gè)調(diào)用直到這個(gè)調(diào)用返回結(jié)果，才會(huì)繼續(xù)往下執(zhí)行

    function block(){
    console.log(1);
    console.log(2);
    // 這里假設(shè)這個(gè)文件比較大，需要花費(fèi)1分鐘才能打開它
    let res = fs.readFileSync("xxx.json")
    console.log(3);
    console.log(4);
}
block() // 輸出 1，2，(這里過了1分鐘之后) 繼續(xù)輸出 3，4

  • 異步

    異步操作在js中的原理是當(dāng)遇到異步操作時(shí)(比如網(wǎng)絡(luò)請(qǐng)求、IO耗時(shí)操作等),這個(gè)異步任務(wù)會(huì)掛起，放到任務(wù)隊(duì)列，任務(wù)隊(duì)列的任務(wù)會(huì)等到任務(wù)隊(duì)列之外的所有代碼執(zhí)行完畢之后在執(zhí)行，因此程序的執(zhí)行順序可能和代碼中的順序不一致。

    function async() {
    console.log("開始準(zhǔn)備請(qǐng)求數(shù)據(jù)");
    console.log("馬上要開始請(qǐng)求了...");
    $.ajax('http://xxxx.com', function(resp) {
        console.log('請(qǐng)求完成~');
    });
    console.log("請(qǐng)求發(fā)出完成");
}
async()
// 開始準(zhǔn)備請(qǐng)求數(shù)據(jù)
// 馬上要開始請(qǐng)求了...
// 請(qǐng)求發(fā)出完成
// 請(qǐng)求完成~

  • 非阻塞

    非阻塞調(diào)用是指程序執(zhí)行到非阻塞調(diào)用時(shí)，會(huì)將該任務(wù)放置任務(wù)隊(duì)列,然后程序繼續(xù)往下執(zhí)行，等任務(wù)隊(duì)列以外的代碼都執(zhí)行完成之后，才開始執(zhí)行任務(wù)隊(duì)列中的方法

    function nonBlocking(){
    console.log("開始讀文件了");
    fs.readFile("./package.json",(err,data)=>{
        console.log("文件讀取完成...");
    })
    console.log("發(fā)起文件讀取完畢");
}
nonBlocking()
// 開始讀文件了
// 發(fā)起文件讀取完畢
// 文件讀取完成...

第四章 異步編程的四種方式

"異步模式"非常重要。在瀏覽器端，耗時(shí)很長(zhǎng)的操作都應(yīng)該異步執(zhí)行，避免瀏覽器失去響應(yīng)，最好的例子就是Ajax操作。在服務(wù)器端，"異步模式"甚至是唯一的模式，因?yàn)閳?zhí)行環(huán)境是單線程的，如果允許同步執(zhí)行所有http請(qǐng)求，服務(wù)器性能會(huì)急劇下降，很快就會(huì)失去響應(yīng)。 ------摘自 阮一峰

  • 回調(diào)函數(shù)

    /**
 * 吃飯
 */
function eat(){
    console.log("開始吃飯");
}
/**
 * 洗手
 * @param {function} afterTask 
 */
function wishHands(afterTask) {
    /**
     * 洗手要洗一分鐘
     */
    console.log("開始洗手...");
    setTimeout(_=>{
        console.log("手洗干凈了...");
        afterTask()
    },1000*60)
}

/**
 * 吃飯前需要洗手
 */
wishHands(eat)
// 開始洗手...
// 手洗干凈了...
// 開始吃飯

  • 事件監(jiān)聽

    function task(){
    console.log("task start");
    setTimeout(_=>{
        task.trigger('finish') // 觸發(fā)finish事件
    },1000*3)
}
function afterTask(){
    console.log("task finish");
}
// 監(jiān)聽finish事件
task.on('finish',afterTask)
task()

    這種方法的優(yōu)點(diǎn)是比較容易理解，可以綁定多個(gè)事件，每個(gè)事件可以指定多個(gè)回調(diào)函數(shù)，而且可以"去耦合"（Decoupling），有利于實(shí)現(xiàn)模塊化。缺點(diǎn)是整個(gè)程序都要變成事件驅(qū)動(dòng)型，運(yùn)行流程會(huì)變得很不清晰。

  • 發(fā)布/訂閱

    我們假定，存在一個(gè)"信號(hào)中心"，某個(gè)任務(wù)執(zhí)行完成，就向信號(hào)中心"發(fā)布"（publish）一個(gè)信號(hào)，其他任務(wù)可以向信號(hào)中心"訂閱"（subscribe）這個(gè)信號(hào)，從而知道什么時(shí)候自己可以開始執(zhí)行。這就叫做"發(fā)布/訂閱模式"（publish-subscribe pattern），又稱"觀察者模式"（observer pattern）。

    這個(gè)模式有多種實(shí)現(xiàn)，下面采用的是Ben Alman的Tiny Pub/Sub，這是jQuery的一個(gè)插件。

    function task(){
    console.log("task start");
    setTimeout(_=>{
        jQuery.publish("finish")
    },1000*3)
}
function afterTask(){
    console.log("task finish");
}
jQuery.subscribe('finish',afterTask)
task()

  • Promise 對(duì)象

    Promises對(duì)象是CommonJS工作組提出的一種規(guī)范，目的是為異步編程提供統(tǒng)一接口。

    它的思想是，每一個(gè)異步任務(wù)返回一個(gè)Promise對(duì)象，該對(duì)象有一個(gè)then方法，允許指定回調(diào)函數(shù)。

    function task(){
    console.log("開始執(zhí)行任務(wù)");
    return new Promise((resolve,reject)=>{
        setTimeout(_=>{
            resolve("我完成啦")
        })
    })
}
function afterTask(){
    console.log("afterTask 開始");
}
task().then(res=>{
    console.log(res);
    afterTask()
})

第五章 關(guān)于Promise

? Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn)，ES6 將其寫進(jìn)了語言標(biāo)準(zhǔn)，統(tǒng)一了用法，原生提供了Promise對(duì)象。

? 所謂Promise，簡(jiǎn)單說就是一個(gè)容器，里面保存著某個(gè)未來才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語法上說，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。

  • 基本用法

    Promise對(duì)象是一個(gè)構(gòu)造函數(shù),接受一個(gè)包含resolve回調(diào)和reject回調(diào)參數(shù)的函數(shù)為參數(shù)，執(zhí)行結(jié)果符合預(yù)期可以調(diào)用resolve，不符合預(yù)期可以執(zhí)行reject拋出異常。

    let promise = new Promise((resolve,reject)=>{
    let res = task()
    if (res is expect) {
        resolve("good")
    }
    reject("res is not expect")
})

    Promise有三種狀態(tài):執(zhí)行中、已成功、已失敗

    resolve調(diào)用之后，promise實(shí)例的狀態(tài)就從執(zhí)行中->已成功

    reject調(diào)用之后，promise實(shí)例的狀態(tài)就從執(zhí)行中->已失敗

    要對(duì)Promise的執(zhí)行結(jié)果做處理可以執(zhí)行它的then方法,then方法包含兩個(gè)參數(shù)，第一個(gè)是成功的回調(diào)，第二個(gè)是失敗可選回調(diào):

    promise.then(res=>{
    console.log("exec success:"+res); // 這里res就是resolve的參數(shù)
},err=>{
    console.log("exec fail:"+err);  // 這里 err就是reject的參數(shù)
})

  • Promise 實(shí)例的屬性

    promise.then(res=>{})  // 可以理解成結(jié)果的回調(diào)
promise.catch(reason=>{}) // 執(zhí)行失敗或發(fā)生異常的回調(diào)
promise.finally(_=>{})  // 執(zhí)行結(jié)束的回調(diào)，不管成功與否都會(huì)回調(diào)

// then()方法和catch()返回的結(jié)果仍然是promise，所以可以使用鏈?zhǔn)綄懛?
//寫法一
promise.then(res=>{

},err=>{

}).finally(_=>{
    
})
// 寫法二
promise.then(res=>{

}).catch(err=>{
    
}).finally(_=>{
    
})

// 寫法一和寫法二效果是一樣的

  • Promise靜態(tài)方法

    • Promise.all(...promise[])將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例
    Promise.all(p1,p2,p3)

    上面代碼中，Promise.all()方法接受一個(gè)數(shù)組作為參數(shù)，p1、p2、p3都是 Promise 實(shí)例，如果不是，就會(huì)先調(diào)用下面講到的Promise.resolve方法，將參數(shù)轉(zhuǎn)為 Promise 實(shí)例，再進(jìn)一步處理。另外，Promise.all()方法的參數(shù)可以不是數(shù)組，但必須具有 Iterator 接口，且返回的每個(gè)成員都是 Promise 實(shí)例。

    p的狀態(tài)由p1、p2、p3決定，分成兩種情況。

    （1）只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會(huì)變成fulfilled，此時(shí)p1、p2、p3的返回值組成一個(gè)數(shù)組，傳遞給p的回調(diào)函數(shù)。

    （2）只要p1、p2、p3之中有一個(gè)被rejected，p的狀態(tài)就變成rejected，此時(shí)第一個(gè)被reject的實(shí)例的返回值，會(huì)傳遞給p的回調(diào)函數(shù)。

    • Promise.race(...promise[])方法同樣是將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例。
    Promise.race(p1,p2,p3)

    上面代碼中，只要p1、p2、p3之中有一個(gè)實(shí)例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個(gè)率先改變的 Promise 實(shí)例的返回值，就傳遞給p的回調(diào)函數(shù)。

    Promise.race()方法的參數(shù)與Promise.all()方法一樣，如果不是 Promise 實(shí)例，就會(huì)先調(diào)用下面講到的Promise.resolve()方法，將參數(shù)轉(zhuǎn)為 Promise 實(shí)例，再進(jìn)一步處理。

    • Promise.resolve(task) 將一個(gè)方法包裝成promise，比如他ajax請(qǐng)求
    • Promise.reject(task) 同上

  • 更多詳情請(qǐng)參考阮一峰 promise

第六章 關(guān)于Generator

Generator 函數(shù)是 ES6 提供的一種異步編程解決方案，語法行為與傳統(tǒng)函數(shù)完全不同。

  • 示例

    function* generatorTest(){
    console.log("generator test start ");
    yield console.log("step 1");
    yield console.log("step 2");
    yield console.log("step 3");
    console.log("generator test finish");
}

let test = generatorTest()
// 什么都沒有
test.next()
// generator test start 
// step 1
test.next()
// step 2
test.next()
// step 3
test.next()
// generator test finish
test.next()
// 什么都沒有

    ? 從上面實(shí)例中我們可以看出來，generator方法的聲明需要加上*號(hào)，里面還有關(guān)鍵字yield調(diào)用 Generator 函數(shù)后，該函數(shù)并不執(zhí)行，返回的也不是函數(shù)運(yùn)行結(jié)果，而是一個(gè)指向內(nèi)部狀態(tài)的指針對(duì)象。然后需要執(zhí)行next方法，內(nèi)部指針就從函數(shù)頭部或上一次停下來的地方開始執(zhí)行，直到遇到下一個(gè)yield表達(dá)式（或return語句）為止。換言之，Generator 函數(shù)是分段執(zhí)行的，yield表達(dá)式是暫停執(zhí)行的標(biāo)記，而next方法可以恢復(fù)執(zhí)行

  • 更多詳情請(qǐng)參考阮一峰 generator

第七章 async和await

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

async 函數(shù)是什么？一句話，它就是 Generator 函數(shù)的語法糖。

  • 使用async與generator的對(duì)比

    const fs = require('fs');
const readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};
// 使用generator
const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
// 使用async
const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
// 一比較就會(huì)發(fā)現(xiàn)，async函數(shù)就是將 Generator 函數(shù)的星號(hào)（*）替換成async，將yield替換成await，僅此而已。

  • 基本用法

    async聲明的方法返回的是一個(gè)promise對(duì)象，可以使用then方法添加回調(diào)函數(shù)，當(dāng)程序執(zhí)行的過程中，一旦遇到await 聲明的語句，程序?qū)?huì)等待這個(gè)語句返回結(jié)果之后才會(huì)執(zhí)行后面的方法。

    • 實(shí)例一：
    // 這里假設(shè)getStudentIdByNumber和getStudentScoreById都是耗時(shí)的網(wǎng)絡(luò)請(qǐng)求，所以是異步的
async function getStudentScoreByStudentNumber(studentNumber)
{
      // 根據(jù)學(xué)號(hào)拿到id
    let studentId = await getStudentIdByNumber(studentNumber)
    // 通過id獲取分?jǐn)?shù)
    let score = await getStudentScoreById(studentId)
    // 獲取分?jǐn)?shù)后返回
    return score
}
// 使用then去獲取執(zhí)行結(jié)果
getStudentScoreByStudentNumber("662297").then(score=>{
    console.log(score);  
})
    • 實(shí)例二：
    function request(){
    return new Promise((resolve,reject)=>{
        setTimeout(resolve,1000*5)
    })
}
async function networkTask(){
    console.log("request start");
    await request()
    console.log("request finish");
}
networkTask()
// 輸出 request start
// 等待5秒
// 輸出 request finish

1、正常情況下，await命令后面是一個(gè) Promise 對(duì)象，返回該對(duì)象的結(jié)果。如果不是 Promise 對(duì)象，就直接返回對(duì)應(yīng)的值。

2、根據(jù)語法規(guī)則，await命令只能出現(xiàn)在 async函數(shù)內(nèi)部，否則都會(huì)報(bào)錯(cuò)。

3、await命令后面的Promise對(duì)象，運(yùn)行結(jié)果可能是rejected，所以最好把await命令放在try...catch代碼塊中。

第八章 注意

  • 如果多個(gè)異步請(qǐng)求之間存在前后關(guān)系，可以像上一章一樣使用await來改造成同步

  • 如果多個(gè)await命令后面的異步操作，如果不存在繼發(fā)關(guān)系，最好讓它們同時(shí)觸發(fā)。

    let foo = await getFoo();
let bar = await getBar();
// 可寫成
// 寫法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 寫法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;

  • await命令只能用在async函數(shù)之中，如果用在普通函數(shù)，就會(huì)報(bào)錯(cuò)。

  • 如果將forEach方法中使用async函數(shù)會(huì)有問題

    // 錯(cuò)誤一
async function dbFuc(db) {
  let docs = [{}, {}, {}]; 
  // 報(bào)錯(cuò)
  docs.forEach(function (doc) {
    await db.post(doc);
  });
}
// 錯(cuò)誤二
function dbFuc(db) { //這里不需要 async
  let docs = [{}, {}, {}];
  // 可能得到錯(cuò)誤結(jié)果
  docs.forEach(async function (doc) {
    await db.post(doc);
  });
}
// 改成for of 準(zhǔn)確
async function dbFuc(db) {
  let docs = [{}, {}, {}];
  for (let doc of docs) {
    await db.post(doc);
  }
}
// 改成reduce
async function dbFuc(db) {
  let docs = [{}, {}, {}];
  await docs.reduce(async (_, doc) => {
    await _;
    await db.post(doc);
  }, undefined);
}

參考資料

阮一峰 異步編程的四種方法

阮一峰 promise

阮一峰 generator

阮一峰 async

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容