淺談async·await

Magicer 發(fā)布于2019-08-22 16:47 / 1193人閱讀

摘要：在語言中，函數(shù)替換的不是表達(dá)式，而是多參數(shù)函數(shù)，將其替換成一個只接受回調(diào)函數(shù)作為參數(shù)的單參數(shù)函數(shù)。為什么里面必須使用函數(shù)呢，因為我們需要確保傳入的值只有一個，利用其回調(diào)函數(shù)，來進(jìn)行遞歸自動控制函數(shù)的流程，接收和交還程序的執(zhí)行權(quán)

前言

這篇文章主要是梳理一下自己對阮一峰大神寫的關(guān)于async/await文章，有寫得不對的地方以及理解得不對的地方，各位大佬請指錯！

對比

簡單對比傳統(tǒng)異步，promise異步，async異步

下文都會以setTimeout來進(jìn)行異步展示，方便理解。

傳統(tǒng)的回調(diào)

setTimeout(callback,1000);

function callback(){
    console.log("拿到結(jié)果了！");
}

setTimeout函數(shù)傳入了兩個參數(shù)(1000/callback)，setTimeout被調(diào)用的時候，主線程不會等待1秒，而是先執(zhí)行別的任務(wù)。callback這個函數(shù)就是一個回調(diào)函數(shù)，即當(dāng)1秒后，主線程會重新調(diào)用callback（這里也不再啰嗦去說event Loop方面的知識了）；

那么，當(dāng)我們異步函數(shù)需要嵌套的時候呢。比如這種情況：

setTimeout(function(){
    console.log("第一個異步回調(diào)了！")
    setTimeout(function(){
        console.log("第二個異步回調(diào)了！")
        setTimeout(function(){
            console.log("第三個異步回調(diào)了！")
            setTimeout(function(){
                console.log("第四個異步回調(diào)了！")
                setTimeout(function(){
                    console.log("第五個異步回調(diào)了！")
                },1000);
            },1000);
        },1000);
    },1000);
},1000);

OK，想死不？

我們用promise來處理

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, "finish");
  });
}

timeout(2000)
  .then(value => {
    console.log("第一層" + value);
    return timeout(2000);
  })
  .then(value => {
    console.log("第二層" + value);
    return timeout(2000);
  })
  .then(value => {
    console.log("第三層" + value);
    return timeout(2000);
  })
  .then(value => {
    console.log("第四層" + value);
    return timeout(2000);
  })
  .then(value => {
    console.log("第五層" + value);
    return timeout(2000);
  })
  .catch(err => {
    console.log(err);
  });

OK，好看點了！

但是還是不方便！

我們用async/await來處理：

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, "finish");
  });
}
async function asyncTimeSys(){
    await timeout(1000);
    console.log("第一層異步結(jié)束！")
    await timeout(1000);
    console.log("第二層異步結(jié)束！")
    await timeout(1000);
    console.log("第三層異步結(jié)束！")
    await timeout(1000);
    console.log("第四層異步結(jié)束！")
    await timeout(1000);
    console.log("第五層異步結(jié)束！")
    return "all finish";
}
asyncTimeSys().then((value)=>{
    console.log(value);
});

OK,舒服了！

在這個asyncTimeSys函數(shù)里面，所有的異步操作，寫的跟同步函數(shù)沒有什么兩樣！

async的原型

async函數(shù)到底是什么？其實他就是Genarator函數(shù)（生成器函數(shù)）的語法糖而已！

內(nèi)置執(zhí)行器。
Generator 函數(shù)的執(zhí)行必須靠執(zhí)行器，所以才有了co模塊，而async函數(shù)自帶執(zhí)行器。也就是說，async函數(shù)的執(zhí)行，與普通函數(shù)一模一樣。完全不像 Generator 函數(shù)，需要調(diào)用next方法，或者用co模塊，才能真正執(zhí)行，得到最后結(jié)果。
更好的語義。
async和await，比起星號和yield，語義更清楚了。async表示函數(shù)里有異步操作，await表示緊跟在后面的表達(dá)式需要等待結(jié)果。
更廣的適用性。
co模塊約定，yield命令后面只能是 Thunk 函數(shù)或 Promise 對象，而async函數(shù)的await命令后面，可以是 Promise 對象和原始類型的值（數(shù)值、字符串和布爾值，但這時等同于同步操作）。
返回值是 Promise。
async函數(shù)的返回值是 Promise 對象，這比 Generator 函數(shù)的返回值是 Iterator 對象方便多了。你可以用then方法指定下一步的操作。
進(jìn)一步說，async函數(shù)完全可以看作多個異步操作，包裝成的一個 Promise 對象，而await命令就是內(nèi)部then命令的語法糖。

其實，async函數(shù)就是一個由Generator封裝的異步環(huán)境，其內(nèi)部是通過交換函數(shù)執(zhí)行權(quán)，以及thunk函數(shù)來實現(xiàn)的！

用Generator函數(shù)封裝異步請求

OK，我們簡單的封裝一個：

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, "finish");
  });
}

function *times(){
    let result =yield timeout(1000);
    return "second next"
}

let gen = times();    //拿到生成器函數(shù),gen可以理解為指針
let firstYield = gen.next(); //firstYield此時為gen指針指向的第一個yield右邊的表達(dá)式，此時timeout(1000)被執(zhí)行
console.log(firstYield);    //   firstYield = {value:Pomise,done:false};

//接下來就是將firstYield中的value里的promise拿出來，作為正常的Promise調(diào)用，如下：
firstYield.value.then(()=>{
    //當(dāng)timeout異步結(jié)束之后，執(zhí)行以下代碼，再將gen指針執(zhí)行下一個yield，由于以下沒有yield了，所以gen.next()的value為return里的東西
    console.log("timeout finish");
    console.log(gen.next());    //{value: "second next", done: true}
}).catch((err)=>{

});

這樣封裝有什么用呢，yield返回回來的東西，還是得像promise那樣調(diào)用。

我們先來看看同步的代碼，先讓它長得像async和await那樣子：

function* times() {
  yield console.log(1);
  yield console.log(2);
  yield console.log(3);
  return "second next";
}

let gen = times();

let result = gen.next();

while (!result.done) {
    result = gen.next();
}

OK，非常像了，但是，這是同步的。異步請求必須得等到第一個yield執(zhí)行完成之后，才能去執(zhí)行第二個yield。我們?nèi)绻某僧惒?，肯定會造成無限循環(huán)。

那么，times生成器里面如果都是異步的話，我們應(yīng)該怎么調(diào)用呢？

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, "finish");
  });
}

function *times(){
    yield timeout(2000);
    yield timeout(2000);
    yield timeout(2000);
    return "finish all!";
}

let gen = times();

let gen1 = gen.next();
gen1.value.then(function(data){
    console.log(data+" one");

    let gen2 = gen.next();
    gen2.value.then(function(data){
        console.log(data+" two");

        let gen3 = gen.next();
        gen3.value.then(function(data){
            console.log(data+" three");



        })

    })

});

仔細(xì)觀察可以發(fā)現(xiàn)，其實每一個value的.then()方法都會傳入一個相同的回調(diào)函數(shù)，這意味著我們可以使用遞歸來流程化管理整個異步流程；

改造一下這個上邊的代碼；

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, "finish");
  });
}

function* times() {
  yield timeout(2000);
  yield timeout(2000);
  yield timeout(2000);
  return "finish all!";
}


function run(fn){
    let gen = fn();

    function next(){
        console.log("finish");
        let result = gen.next();
        if(result.done) return;
        result.value.then(next);
    }
    next();
}

run(times);

OK，現(xiàn)在我們可以使用run函數(shù)，使得生成器函數(shù)times里的異步請求，一步接著一步往下執(zhí)行。

那么，這個run函數(shù)里邊的next到底是什么呢，它其實是一個thunk函數(shù)；

thunk函數(shù)

Thunk函數(shù)的誕生是源于一個編譯器設(shè)計的問題：求值策略，即函數(shù)的參數(shù)到底應(yīng)該何時求值。

看下邊的代碼，請思考什么時候進(jìn)行求值：

var x = 1;
function f(m) {
    return m * 2;
}
f(x + 5);

試問：x+5這個表達(dá)式應(yīng)該什么時候求值

傳值調(diào)用(call by value)，即在進(jìn)入函數(shù)體之間，先計算x+5的值，再將這個值（6）傳入函數(shù)f，例如c語言，這種做法的好處是實現(xiàn)比較簡單，但是有可能會造成性能損失。

傳名調(diào)用(call by name)，即直接將表達(dá)式(x+5)傳入函數(shù)體，只在用到它的時候求值。

OK，thunk函數(shù)究竟是什么：

編譯器的傳名調(diào)用實現(xiàn)，往往就是將參數(shù)放到一個臨時函數(shù)之中，再將這個臨時函數(shù)轉(zhuǎn)入函數(shù)體，這個臨時函數(shù)就叫做Thunk函數(shù)。

將上邊的代碼進(jìn)行改造：

var thunk = function () {
    return x + 5;
};

function f(thunk) {
    return thunk() * 2;
}

js中的傳名調(diào)用是什么呢，與真正的thunk有什么區(qū)別呢?

JavaScript 語言是傳值調(diào)用，它的 Thunk 函數(shù)含義有所不同。在 JavaScript 語言中，Thunk 函數(shù)替換的不是表達(dá)式，而是多參數(shù)函數(shù)，將其替換成一個只接受回調(diào)函數(shù)作為參數(shù)的單參數(shù)函數(shù)。

網(wǎng)上對于thunk的演示都是使用的fs模塊的readFile方法來進(jìn)行演示

// 正常版本的readFile（多參數(shù)版本）
fs.readFile(fileName, callback);

// Thunk版本的readFile（單參數(shù)版本）
var Thunk = function (fileName) {
  return function (callback) {
    return fs.readFile(fileName, callback);
  };
};

var readFileThunk = Thunk(fileName);
readFileThunk(callback);

其實，任何函數(shù)，只要參數(shù)有回調(diào)函數(shù)，就能寫成Thunk函數(shù)的形式。下面是一個簡單的Thunk函數(shù)轉(zhuǎn)換器。

讓我們用setTimeout來進(jìn)行一次演示：

//正常版本的setTimeout;
setTimeout(function(data){
    console.log(data);
},1000,"finish");

//thunk版本的setTimeout
let thunk = function(time){
    return function(callback){
        return setTimeout(callback,time,"finish");
    }
}
let setTimeoutChunk = thunk(1000);
setTimeoutChunk(function(data){
    console.log(data);
});

現(xiàn)在回頭看一看用Generator函數(shù)封裝異步請求這一節(jié)中最后一個實例中，我們封裝的timeout函數(shù)，他其實就是一個thunk函數(shù)，我在那一節(jié)中沒有給大家說明這一條：

yield命令后面的必須是 Thunk 函數(shù)。

為什么Generator里面必須使用thunk函數(shù)呢，因為我們需要確保傳入的值只有一個，利用其回調(diào)函數(shù)，來進(jìn)行遞歸自動控制Generator函數(shù)的流程，接收和交還程序的執(zhí)行權(quán);

GPU云服務(wù)器云服務(wù)器 async await await-async async-await await

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/94660.html

發(fā)表評論

登陸后可評論

0條評論

Magicer

男|高級講師

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

TA的文章

多態(tài)

閱讀 2659·2021-11-24 09:38
CSS實例詳解：Flex布局

閱讀 2661·2019-08-30 15:54
white-space、word-wrap和word-break的簡單整理

閱讀 994·2019-08-30 15:52
前端面試每日3+1——第118天

閱讀 1980·2019-08-30 15:44
Flex布局入門

閱讀 2774·2019-08-30 13:48
css選擇器總結(jié)

閱讀 842·2019-08-29 16:21
Sass 語法規(guī)則

閱讀 1072·2019-08-29 14:03
「CSS」DOM2 級樣式

閱讀 2265·2019-08-28 18:15

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

淺談async·await

相關(guān)文章

淺談JavaScript中的事件循環(huán)機(jī)制

[前端工坊]淺談Web編程中的異步調(diào)用的發(fā)展演變

最后一次搞懂 Event Loop

淺談前端中的錯誤處理

發(fā)表評論

0條評論

Magicer

男|高級講師

TA的文章

多態(tài)

CSS實例詳解：Flex布局

white-space、word-wrap和word-break的簡單整理

前端面試每日3+1——第118天

Flex布局入門

css選擇器總結(jié)

Sass 語法規(guī)則

「CSS」DOM2 級樣式

最新活動

資訊專欄INFORMATION COLUMN

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

淺談async·await

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

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