js異步發(fā)展歷史與Promise原理分析

jimhs 發(fā)布于2019-08-22 15:19 / 2829人閱讀

摘要：異步的發(fā)展歷史寫(xiě)法意為回調(diào)函數(shù)，即異步操作執(zhí)行完后觸發(fā)執(zhí)行的函數(shù)，例如當(dāng)請(qǐng)求完成時(shí)就會(huì)觸發(fā)函數(shù)。實(shí)例生成以后，可以用方法分別指定狀態(tài)和狀態(tài)的回調(diào)函數(shù)。第一個(gè)回調(diào)函數(shù)是對(duì)象的狀態(tài)變?yōu)闀r(shí)調(diào)用，第二個(gè)回調(diào)函數(shù)是對(duì)象的狀態(tài)變?yōu)闀r(shí)調(diào)用。

關(guān)于異步

所謂"異步"，簡(jiǎn)單說(shuō)就是一個(gè)任務(wù)不是連續(xù)完成的，可以理解成該任務(wù)被人為分成兩段，先執(zhí)行第一段，然后轉(zhuǎn)而執(zhí)行其他任務(wù)，等做好了準(zhǔn)備，再回過(guò)頭執(zhí)行第二段。

比如，有一個(gè)任務(wù)是讀取文件進(jìn)行處理，任務(wù)的第一段是向操作系統(tǒng)發(fā)出請(qǐng)求，要求讀取文件。然后，程序執(zhí)行其他任務(wù)，等到操作系統(tǒng)返回文件，再接著執(zhí)行任務(wù)的第二段（處理文件）。這種不連續(xù)的執(zhí)行，就叫做異步。

相應(yīng)地，連續(xù)的執(zhí)行就叫做同步。由于是連續(xù)執(zhí)行，不能插入其他任務(wù)，所以操作系統(tǒng)從硬盤(pán)讀取文件的這段時(shí)間，程序只能干等著。

簡(jiǎn)單的說(shuō)同步就是大家排隊(duì)工作，異步就是大家同時(shí)工作。如果你還不太明白異步與同步，多看看JS基礎(chǔ)的文章。

異步的發(fā)展歷史 1.CallBack寫(xiě)法

CallBack意為“回調(diào)函數(shù)”，即異步操作執(zhí)行完后觸發(fā)執(zhí)行的函數(shù)，例如：

$.get("http://api.xxxx.com/xxx",callback);

當(dāng)請(qǐng)求完成時(shí)就會(huì)觸發(fā)callback函數(shù)。

callback可以完成異步操作，但是經(jīng)歷過(guò)JQuery時(shí)代的人應(yīng)該都對(duì)某一種需求折磨過(guò)，舉個(gè)例子：項(xiàng)目要求前端ajax請(qǐng)求后端接口列表類(lèi)型名稱(chēng)，然后在用類(lèi)型名稱(chēng)ajax請(qǐng)求列表id，在用id請(qǐng)求列表具體內(nèi)容，最后代碼大概是這樣的

$.ajax({
    url: "type",
    data:1,
    success: function (a) {
        $.ajax({
            url: "list",
            data:a,
            success: function (b) {
                $.ajax({
                    url: "content",
                    data:b,
                    success: function (c) {
                        console.log(c)
                    }
                })
            }
        })
    }
})

這是是單純的嵌套代碼，如若再加上業(yè)務(wù)代碼，代碼可讀性可想而知，如果是開(kāi)發(fā)起來(lái)還好，但是后期的維護(hù)和修改的難度足以讓人瘋掉。這就是那個(gè)JQuery時(shí)代的“回調(diào)地獄”問(wèn)題。

2.Promise

為了解決“回調(diào)地獄”問(wèn)題，提出了Promise對(duì)象，并且后來(lái)加入了ES6標(biāo)準(zhǔn)，Promise對(duì)象簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語(yǔ)法上說(shuō)，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是resolve和reject。它們是兩個(gè)函數(shù)，由 JavaScript 引擎提供，不用自己部署。

resolve函數(shù)的作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved），在異步操作成功時(shí)調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去；reject函數(shù)的作用是，將Promise對(duì)象的狀態(tài)從“未完成”變?yōu)椤笆　保磸?pending 變?yōu)?rejected），在異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去。

Promise實(shí)例生成以后，可以用then方法分別指定resolved狀態(tài)和rejected狀態(tài)的回調(diào)函數(shù)。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

then方法可以接受兩個(gè)回調(diào)函數(shù)作為參數(shù)。第一個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)閞esolved時(shí)調(diào)用，第二個(gè)回調(diào)函數(shù)是Promise對(duì)象的狀態(tài)變?yōu)閞ejected時(shí)調(diào)用。其中，第二個(gè)函數(shù)是可選的，不一定要提供。這兩個(gè)函數(shù)都接受Promise對(duì)象傳出的值作為參數(shù)。

這樣采用 Promise，解決“回調(diào)地獄”問(wèn)題，比如連續(xù)讀取多個(gè)文件，寫(xiě)法如下。

var readFile = require("fs-readfile-promise");

readFile(fileA)
.then(function (data) {
  console.log(data.toString());
})
.then(function () {
  return readFile(fileB);
})
.then(function (data) {
  console.log(data.toString());
})
.catch(function (err) {
  console.log(err);
});

可見(jiàn)這種寫(xiě)法要比CallBack寫(xiě)法直觀(guān)的多。但是，有沒(méi)有更好的寫(xiě)法呢？

3.Generator 函數(shù)

Genrator 函數(shù)要用* 來(lái)比標(biāo)識(shí)，yield關(guān)鍵字表示暫停。將函數(shù)分割出好多個(gè)部分，調(diào)用一次next就會(huì)繼續(xù)向下執(zhí)行。返回結(jié)果是一個(gè)迭代器，迭代器有一個(gè)next方法。

function* read() {
    console.log(1);
    let a = yield "123";
    console.log(a);
    let b = yield 9
    console.log(b);
    return b;
}
let it = read();
console.log(it.next("213")); // {value:"123",done:false}
console.log(it.next("100")); // {value:9,done:false}
console.log(it.next("200")); // {value:200,done:true}
console.log(it.next("200")); // {value:200,done:true}

yield后面跟著的是value的值，yield等號(hào)前面的是我們當(dāng)前調(diào)用next傳進(jìn)來(lái)的值，并且第一次next傳值是無(wú)效的。

處理異步的時(shí)候Generator和Promise搭配使用

let bluebird = require("bluebird");
let fs = require("fs");
let read = bluebird.promisify(fs.readFile);//將readFile轉(zhuǎn)為Promise對(duì)象的實(shí)例
function* r() {
    let content1 = yield read("./2.promise/1.txt", "utf8");
    let content2 = yield read(content1, "utf8");
    return content2;
}

這樣看起來(lái)是我們想要的樣子,但是只寫(xiě)成這樣還不行，想得到r()的結(jié)果還要對(duì)函數(shù)進(jìn)行處理

function co(it) {
    return new Promise(function (resolve, reject) {
        function next(d) {
            let { value, done } = it.next(d);
            if (!done) {
                value.then(function (data) { // 2,txt
                    next(data)
                }, reject)
            } else {
                resolve(value);
            }
        }
        next();
    });
}
co(r()).then(function (data) {
    console.log(data)//得到r()的執(zhí)行結(jié)果
})

這樣的處理方式顯然很麻煩，并不是我們想要，我們想要直觀(guān)的寫(xiě)起來(lái)就就像同步函數(shù)，而且簡(jiǎn)便的方式處理異步。有這樣的方法嗎？

4.async-await函數(shù)

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

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

let bluebird = require("bluebird");
let fs = require("fs");
let read = bluebird.promisify(fs.readFile);

async function r(){
    try{
        let content1 = await read("./2.promise/100.txt","utf8");
        let content2 = await read(content1,"utf8");
        return content2;
    }catch(e){ // 如果出錯(cuò)會(huì)catch
        console.log("err",e)
    }
}

一比較就會(huì)發(fā)現(xiàn)，async函數(shù)就是將 Generator 函數(shù)的星號(hào)（*）替換成async，將yield替換成await，僅此而已。

async函數(shù)返回的是promise

r().then(function(data){
    console.log(data);
},function(err){

})

至此，async-await函數(shù)已經(jīng)可以我們滿(mǎn)意，以后會(huì)不會(huì)出現(xiàn)更優(yōu)秀的方案？以我們廣大程序群體的創(chuàng)造力，相信一定會(huì)有的。

Promise原理分析

async-await函數(shù)其實(shí)只是Generator函數(shù)的語(yǔ)法糖，而Generator函數(shù)的實(shí)現(xiàn)方式也是要基于Promise，所以我們隊(duì)Promise的實(shí)現(xiàn)原理進(jìn)行分析。

Promise對(duì)象有以下幾種狀態(tài):

pending: 初始狀態(tài), 既不是 fulfilled 也不是 rejected.

fulfilled: 成功的操作.

rejected: 失敗的操作.

在上面了解了Promise的基本用法后，我們先將Promise的框架搭起來(lái)

function Promise(executor) { // executor是一個(gè)執(zhí)行函數(shù)
    let self = this;
    self.status = "pending";
    self.value = undefined; // 默認(rèn)成功的值
    self.reason = undefined; // 默認(rèn)失敗的原因
    self.onResolvedCallbacks = []; // 存放then成功的回調(diào)
    self.onRejectedCallbacks = []; // 存放then失敗的回調(diào)
    function resolve(value) { // 成功狀態(tài)
        
    }
    function reject(reason) { // 失敗狀態(tài)
        
    }
    try {
        executor(resolve, reject)
    } catch (e) { // 捕獲的時(shí)候發(fā)生異常,就直接失敗了
        reject(e);
    }
}

Promise.prototype.then = function (onFulfilled, onRjected) {
//then方法
})

接下來(lái)當(dāng)調(diào)用成功狀態(tài)resolve的時(shí)候，會(huì)改變狀態(tài)，執(zhí)行回調(diào)函數(shù)：

function resolve(value) { // 成功狀態(tài)
        if (self.status === "pending") {
            self.status = "resolved";
            self.value = value;
            self.onResolvedCallbacks.forEach(function (fn) {
                fn();
            });
        }
    }

reject函數(shù)同理

function reject(reason) { // 失敗狀態(tài)
        if (self.status === "pending") {
            self.status = "rejected";
            self.reason = reason;
            self.onRejectedCallbacks.forEach(function (fn) {
                fn();
            })
        }
    }

接下來(lái)我們完成then函數(shù)

Promise.prototype.then = function (onFulfilled, onRjected) {
    let self = this;
    let promise2; //返回的promise
    if (self.status === "resolved") {
        promise2 = new Promise(function (resolve, reject) {
            
        })
    }
    if (self.status === "rejected") {
        promise2 = new Promise(function (resolve, reject) {
            
        })
    }
    // 當(dāng)調(diào)用then時(shí)可能沒(méi)成功 也沒(méi)失敗
    if (self.status === "pending") {
        promise2 = new Promise(function (resolve, reject) {

        })
    }
    return promise2;
}

Promise允許鏈?zhǔn)秸{(diào)用，所以要返回一個(gè)新的Promise對(duì)象promise2

Promise.prototype.then = function (onFulfilled, onRjected) {
    //成功和失敗默認(rèn)不穿給一個(gè)函數(shù)
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : function (value) {
        return value;
    }
    onRjected = typeof onRjected === "function" ? onRjected : function (err) {
        throw err;
    }
    let self = this;
    let promise2; //返回的promise
    if (self.status === "resolved") {
        promise2 = new Promise(function (resolve, reject) {
            setTimeout(function () {
                try {
                    let x = onFulfilled(self.value);
                    // x可能是別人promise，寫(xiě)一個(gè)方法統(tǒng)一處理
                    resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            })
        })
    }
    if (self.status === "rejected") {
        promise2 = new Promise(function (resolve, reject) {
            setTimeout(function () {
                try {
                    let x = onRjected(self.reason);
                    resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                    
                    reject(e);
                }
            })

        })
    }
    // 當(dāng)調(diào)用then時(shí)可能沒(méi)成功 也沒(méi)失敗
    if (self.status === "pending") {
        promise2 = new Promise(function (resolve, reject) {
            // 此時(shí)沒(méi)有resolve 也沒(méi)有reject
            self.onResolvedCallbacks.push(function () {
                setTimeout(function () {
                    try {
                        let x = onFulfilled(self.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e)
                    }
                })
            });
            self.onRejectedCallbacks.push(function () {
                setTimeout(function () {
                    try {
                        let x = onRjected(self.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                })
            });
        })
    }
    return promise2;
}

在promise2內(nèi)部定義一個(gè)變量x為回調(diào)函數(shù)的返回值，由于返回值可能會(huì)有多種可能的情況，所以我們定義一個(gè)resolvePromise函數(shù)統(tǒng)一處理

返回值可以分為

promise返回自己（報(bào)錯(cuò)循環(huán)引用）

返回promise對(duì)象（根據(jù)promise對(duì)象調(diào)用成功或失敗回調(diào)函數(shù)）

返回普通值（調(diào)用成功回調(diào)函數(shù)傳入返回值）

報(bào)錯(cuò) （調(diào)用失敗回到傳入錯(cuò)誤）

function resolvePromise(promise2, x, resolve, reject) {
    if (promise2 === x) { 
        return reject(new TypeError("循環(huán)引用了"))
    }
    // 判定x是不是一個(gè)promise,promise應(yīng)該是一個(gè)對(duì)象
    let called; // 表示是否調(diào)用過(guò)成功或者失敗
    if (x !== null && (typeof x === "object" || typeof x === "function")) {
        try { // {then:1}
            let then = x.then;
            if (typeof then === "function") {
                // 成功
                then.call(x, function (y) {
                    if (called) return
                    called = true
                    // y可能還是一個(gè)promise，在去解析直到返回的是一個(gè)普通值
                    resolvePromise(promise2, y, resolve, reject)
                }, function (err) { //失敗
                    if (called) return
                    called = true
                    reject(err);
                })
            } else {
                resolve(x)
            }
        } catch (e) {
            if (called) return
            called = true;
            reject(e);
        }
    } else { // 說(shuō)明是一個(gè)普通值
        resolve(x); // 調(diào)用成功回調(diào)
    }
}

如果返回值為對(duì)象或函數(shù)，且有then方法，那我們就認(rèn)為是一個(gè)promise對(duì)象，去調(diào)用這個(gè)promise進(jìn)行遞歸，直到返回普通值調(diào)用成功回調(diào)。

最后，再加上一個(gè)catch方法，很簡(jiǎn)單

Promise.prototype.catch = function (callback) {
    return this.then(null, callback)
}

這些就是promise的主要功能的原理，附上完整代碼

function Promise(executor) { // executor是一個(gè)執(zhí)行函數(shù)
    let self = this;
    self.status = "pending";
    self.value = undefined; // 默認(rèn)成功的值
    self.reason = undefined; // 默認(rèn)失敗的原因
    self.onResolvedCallbacks = []; // 存放then成功的回調(diào)
    self.onRejectedCallbacks = []; // 存放then失敗的回調(diào)
    function resolve(value) { // 成功狀態(tài)
        if (self.status === "pending") {
            self.status = "resolved";
            self.value = value;
            self.onResolvedCallbacks.forEach(function (fn) {
                fn();
            });
        }
    }
    function reject(reason) { // 失敗狀態(tài)
        if (self.status === "pending") {
            self.status = "rejected";
            self.reason = reason;
            self.onRejectedCallbacks.forEach(function (fn) {
                fn();
            })
        }
    }
    try {
        executor(resolve, reject)
    } catch (e) { 
        reject(e);
    }
}
function resolvePromise(promise2, x, resolve, reject) {
    if (promise2 === x) { 
        return reject(new TypeError("循環(huán)引用了"))
    }
    let called; 
    if (x !== null && (typeof x === "object" || typeof x === "function")) {
        try { 
            let then = x.then;
            if (typeof then === "function") {
                then.call(x, function (y) {
                    if (called) return
                    called = true
                    resolvePromise(promise2, y, resolve, reject)
                }, function (err) { //失敗
                    if (called) return
                    called = true
                    reject(err);
                })
            } else {
                resolve(x)
            }
        } catch (e) {
            if (called) return
            called = true;
            reject(e);
        }
    } else { 
        resolve(x); 
    }
}
Promise.prototype.then = function (onFulfilled, onRjected) {
    onFulfilled = typeof onFulfilled === "function" ? onFulfilled : function (value) {
        return value;
    }
    onRjected = typeof onRjected === "function" ? onRjected : function (err) {
        throw err;
    }
    let self = this;
    let promise2; 
    if (self.status === "resolved") {
        promise2 = new Promise(function (resolve, reject) {
            setTimeout(function () {
                try {
                    let x = onFulfilled(self.value);
                    resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                    reject(e);
                }
            })
        })
    }
    if (self.status === "rejected") {
        promise2 = new Promise(function (resolve, reject) {
            setTimeout(function () {
                try {
                    let x = onRjected(self.reason);
                    resolvePromise(promise2, x, resolve, reject);
                } catch (e) {
                    
                    reject(e);
                }
            })

        })
    }

    if (self.status === "pending") {
        promise2 = new Promise(function (resolve, reject) {
            self.onResolvedCallbacks.push(function () {
                setTimeout(function () {
                    try {
                        let x = onFulfilled(self.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e)
                    }
                })
            });
            self.onRejectedCallbacks.push(function () {
                setTimeout(function () {
                    try {
                        let x = onRjected(self.reason);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (e) {
                        reject(e);
                    }
                })
            });
        })
    }
    return promise2;
}

Promise.prototype.catch = function (callback) {
    return this.then(null, callback)
}

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

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

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

登陸后可評(píng)論

0條評(píng)論

jimhs

男|高級(jí)講師

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

TA的文章

深度學(xué)習(xí)框架tensorflow

閱讀 701·2023-04-25 19:53
主機(jī)的域名是什么-主機(jī)域名中哪個(gè)表示主機(jī)名？

閱讀 4295·2021-09-22 15:13
HTML contenteditable屬性

閱讀 2578·2019-08-30 10:56
如何在Vue里建立長(zhǎng)按指令

閱讀 1335·2019-08-29 16:27
HTML簡(jiǎn)單的提示框

閱讀 2946·2019-08-29 14:00
js異步從入門(mén)到放棄（四）- Generator 封裝異步任務(wù)

閱讀 2424·2019-08-26 13:56
深入理解 Undefined

閱讀 447·2019-08-26 13:29
||和&&返回什么?

閱讀 1625·2019-08-26 11:31

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

js異步發(fā)展歷史與Promise原理分析

相關(guān)文章

JavaScript 運(yùn)行機(jī)制--Event Loop詳解

**異步發(fā)展流程 —— Generators + co 讓異步更優(yōu)雅**

Node_深入淺出Node

JavaScript 異步

**【16】winter重學(xué)前端 - JavaScript執(zhí)行（一）：Promise里的代碼為什么比se**

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

0條評(píng)論

jimhs

男|高級(jí)講師

TA的文章

深度學(xué)習(xí)框架tensorflow

主機(jī)的域名是什么-主機(jī)域名中哪個(gè)表示主機(jī)名？

HTML contenteditable屬性

如何在Vue里建立長(zhǎng)按指令

HTML簡(jiǎn)單的提示框

js異步從入門(mén)到放棄（四）- Generator 封裝異步任務(wù)

深入理解 Undefined

||和&&返回什么?

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

js異步發(fā)展歷史與Promise原理分析

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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