js異步發展歷史與Promise原理分析

時間 2019-12-13

標籤異步發展歷史 promise 原理分析欄目 JavaScript 简体版

原文原文鏈接

關於異步

所謂"異步"，簡單說就是一個任務不是連續完成的，能夠理解成該任務被人爲分紅兩段，先執行第一段，而後轉而執行其餘任務，等作好了準備，再回過頭執行第二段。前端

好比，有一個任務是讀取文件進行處理，任務的第一段是向操做系統發出請求，要求讀取文件。而後，程序執行其餘任務，等到操做系統返回文件，再接着執行任務的第二段（處理文件）。這種不連續的執行，就叫作異步。ajax

相應地，連續的執行就叫作同步。因爲是連續執行，不能插入其餘任務，因此操做系統從硬盤讀取文件的這段時間，程序只能乾等着。後端

簡單的說同步就是你們排隊工做，異步就是你們同時工做。若是你還不太明白異步與同步，多看看JS基礎的文章。api

異步的發展歷史

1.CallBack寫法

CallBack意爲「回調函數」，即異步操做執行完後觸發執行的函數，例如：promise

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

當請求完成時就會觸發callback函數。框架

callback能夠完成異步操做，可是經歷過JQuery時代的人應該都對某一種需求折磨過，舉個例子：項目要求前端ajax請求後端接口列表類型名稱，而後在用類型名稱ajax請求列表id，在用id請求列表具體內容，最後代碼大概是這樣的異步

$.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)
                    }
                })
            }
        })
    }
})

這是是單純的嵌套代碼，如若再加上業務代碼，代碼可讀性可想而知，若是是開發起來還好，可是後期的維護和修改的難度足以讓人瘋掉。這就是那個JQuery時代的「回調地獄」問題。async

2.Promise

爲了解決「回調地獄」問題，提出了Promise對象，而且後來加入了ES6標準，Promise對象簡單說就是一個容器，裏面保存着某個將來纔會結束的事件（一般是一個異步操做）的結果。從語法上說，Promise 是一個對象，從它能夠獲取異步操做的消息。Promise 提供統一的 API，各類異步操做均可以用一樣的方法進行處理。函數

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

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

Promise構造函數接受一個函數做爲參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，由 JavaScript 引擎提供，不用本身部署。ui

resolve函數的做用是，將Promise對象的狀態從「未完成」變爲「成功」（即從 pending 變爲 resolved），在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去；reject函數的做用是，將Promise對象的狀態從「未完成」變爲「失敗」（即從 pending 變爲 rejected），在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞出去。

Promise實例生成之後，能夠用then方法分別指定resolved狀態和rejected狀態的回調函數。

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

then方法能夠接受兩個回調函數做爲參數。第一個回調函數是Promise對象的狀態變爲resolved時調用，第二個回調函數是Promise對象的狀態變爲rejected時調用。其中，第二個函數是可選的，不必定要提供。這兩個函數都接受Promise對象傳出的值做爲參數。

這樣採用 Promise，解決「回調地獄」問題，好比連續讀取多個文件，寫法以下。

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);
});

可見這種寫法要比CallBack寫法直觀的多。可是，有沒有更好的寫法呢？

3.Generator 函數

Genrator 函數要用* 來比標識，yield關鍵字表示暫停。將函數分割出好多個部分，調用一次next就會繼續向下執行。返回結果是一個迭代器，迭代器有一個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等號前面的是咱們當前調用next傳進來的值，而且第一次next傳值是無效的。

處理異步的時候Generator和Promise搭配使用

let bluebird = require('bluebird');
let fs = require('fs');
let read = bluebird.promisify(fs.readFile);//將readFile轉爲Promise對象的實例
function* r() {
    let content1 = yield read('./2.promise/1.txt', 'utf8');
    let content2 = yield read(content1, 'utf8');
    return content2;
}

這樣看起來是咱們想要的樣子,可是隻寫成這樣還不行，想獲得r()的結果還要對函數進行處理

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()的執行結果
})

這樣的處理方式顯然很麻煩，並非咱們想要，咱們想要直觀的寫起來就就像同步函數，並且簡便的方式處理異步。有這樣的方法嗎？

4.async-await函數

ES2017 標準引入了 async 函數，使得異步操做變得更加方便。

async 函數是什麼？一句話，它就是 Generator 函數的語法糖。

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){ // 若是出錯會catch
        console.log('err',e)
    }
}

一比較就會發現，async函數就是將 Generator 函數的星號（*）替換成async，將yield替換成await，僅此而已。

async函數返回的是promise

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

})

至此，async-await函數已經能夠咱們滿意，之後會不會出現更優秀的方案？以咱們廣大程序羣體的創造力，相信必定會有的。

Promise原理分析

async-await函數其實只是Generator函數的語法糖，而Generator函數的實現方式也是要基於Promise，因此咱們隊Promise的實現原理進行分析。

Promise對象有如下幾種狀態:

pending: 初始狀態, 既不是 fulfilled 也不是 rejected.
fulfilled: 成功的操做.
rejected: 失敗的操做.

在上面瞭解了Promise的基本用法後，咱們先將Promise的框架搭起來

function Promise(executor) { // executor是一個執行函數
    let self = this;
    self.status = 'pending';
    self.value = undefined; // 默認成功的值
    self.reason = undefined; // 默認失敗的緣由
    self.onResolvedCallbacks = []; // 存放then成功的回調
    self.onRejectedCallbacks = []; // 存放then失敗的回調
    function resolve(value) { // 成功狀態
        
    }
    function reject(reason) { // 失敗狀態
        
    }
    try {
        executor(resolve, reject)
    } catch (e) { // 捕獲的時候發生異常,就直接失敗了
        reject(e);
    }
}

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

接下來當調用成功狀態resolve的時候，會改變狀態，執行回調函數：

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

reject函數同理

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

接下來咱們完成then函數

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) {
            
        })
    }
    // 當調用then時可能沒成功 也沒失敗
    if (self.status === 'pending') {
        promise2 = new Promise(function (resolve, reject) {

        })
    }
    return promise2;
}

Promise容許鏈式調用，因此要返回一個新的Promise對象promise2

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; //返回的promise
    if (self.status === 'resolved') {
        promise2 = new Promise(function (resolve, reject) {
            setTimeout(function () {
                try {
                    let x = onFulfilled(self.value);
                    // x多是別人promise，寫一個方法統一處理
                    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);
                }
            })

        })
    }
    // 當調用then時可能沒成功 也沒失敗
    if (self.status === 'pending') {
        promise2 = new Promise(function (resolve, reject) {
            // 此時沒有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;
}

在promise2內部定義一個變量x爲回調函數的返回值，因爲返回值可能會有多種可能的狀況，因此咱們定義一個resolvePromise函數統一處理

返回值能夠分爲

promise返回本身（報錯循環引用）
返回promise對象（根據promise對象調用成功或失敗回調函數）
返回普通值（調用成功回調函數傳入返回值）
報錯（調用失敗回到傳入錯誤）

function resolvePromise(promise2, x, resolve, reject) {
    if (promise2 === x) { 
        return reject(new TypeError('循環引用了'))
    }
    // 斷定x是否是一個promise,promise應該是一個對象
    let called; // 表示是否調用過成功或者失敗
    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可能仍是一個promise，在去解析直到返回的是一個普通值
                    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); // 調用成功回調
    }
}

若是返回值爲對象或函數，且有then方法，那咱們就認爲是一個promise對象，去調用這個promise進行遞歸，直到返回普通值調用成功回調。

最後，再加上一個catch方法，很簡單

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

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

function Promise(executor) { // executor是一個執行函數
    let self = this;
    self.status = 'pending';
    self.value = undefined; // 默認成功的值
    self.reason = undefined; // 默認失敗的緣由
    self.onResolvedCallbacks = []; // 存放then成功的回調
    self.onRejectedCallbacks = []; // 存放then失敗的回調
    function resolve(value) { // 成功狀態
        if (self.status === 'pending') {
            self.status = 'resolved';
            self.value = value;
            self.onResolvedCallbacks.forEach(function (fn) {
                fn();
            });
        }
    }
    function reject(reason) { // 失敗狀態
        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('循環引用了'))
    }
    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)
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。