Promise實現

weixin_33797791發表於2019-03-04

Promise

1. 非同步回撥

1.1 回撥地獄

在需要多個操作的時候，會導致多個回撥函式巢狀，導致程式碼不夠直觀，就是常說的回撥地獄

1.2 並行結果

如果幾個非同步操作之間並沒有前後順序之分,但需要等多個非同步操作都完成後才能執行後續的任務，無法實現並行節約時間

2. Promise

Promise本意是承諾，在程式中的意思就是承諾我過一段時間後會給你一個結果。什麼時候會用到過一段時間？答案是非同步操作，非同步是指可能比較長時間才有結果的才做，例如網路請求、讀取本地檔案等

3. Promise的三種狀態

Pending Promise物件例項建立時候的初始狀態
Fulfilled 可以理解為成功的狀態
Rejected 可以理解為失敗的狀態

then 方法就是用來指定Promise 物件的狀態改變時確定執行的操作，resolve 時執行第一個函式（onFulfilled），reject 時執行第二個函式（onRejected）

4. 構造一個Promise

4.1 使用Promise

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        if(Math.random()>0.5)
            resolve('This is resolve!');
        else
            reject('This is reject!');
    }, 1000);
});
promise.then(Fulfilled,Rejected)
複製程式碼

構造一個Promise例項需要給Promise建構函式傳入一個函式。
傳入的函式需要有兩個形參，兩個形參都是function型別的引數。
- 第一個形參執行後會讓Promise例項處於resolve狀態，所以我們一般給第一個形參命名為resolve,使 Promise 物件的狀態改變成成功，同時傳遞一個引數用於後續成功後的操作
- 第一個形參執行後會讓Promise例項處於reject狀態，所以我們一般給第一個形參命名為reject,將 Promise 物件的狀態改變為失敗，同時將錯誤的資訊傳遞到後續錯誤處理的操作

4.2 es5模擬Promise

function Promise(fn) {
    fn((data)=> {
        this.success(data);
    }, (error)=> {
        this.error();
    });
}

Promise.prototype.resolve = function (data) {
    this.success(data);
}

Promise.prototype.reject = function (error) {
    this.error(error);
}

Promise.prototype.then = function (success, error) {
    this.success = success;
    this.error = error;
}
複製程式碼

4.3 es6模擬Promise

class Promise {
    constructor(fn) {
        fn((data)=> {
            this.success(data);
        }, (error)=> {
            this.error();
        });
    }

    resolve(data) {
        this.success(data);
    }

    reject(error) {
        this.error(error);
    }

    then(success, error) {
        this.success = success;
        this.error = error;
        console.log(this);
    }
}
複製程式碼

5. promise 做為函式的返回值

function ajaxPromise (queryUrl) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open('GET', queryUrl, true);
    xhr.send(null);
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.responseText);
        } else {
          reject(xhr.responseText);
        }
      }
    }
  });
}

ajaxPromise('http://www.baidu.com')
  .then((value) => {
    console.log(value);
  })
  .catch((err) => {
    console.error(err);
  });
複製程式碼

6.promise的鏈式呼叫

每次呼叫返回的都是一個新的Promise例項
鏈式呼叫的引數通過返回值傳遞

then可以使用鏈式呼叫的寫法原因在於，每一次執行該方法時總是會返回一個Promise物件

readFile('1.txt').then(function (data) {
    console.log(data);
    return data;
}).then(function (data) {
    console.log(data);
    return readFile(data);
}).then(function (data) {
    console.log(data);
}).catch(function(err){
 console.log(err);
});
複製程式碼

7.promise API

7.1 Promise.all

引數：接受一個陣列，陣列內都是Promise例項
返回值：返回一個Promise例項，這個Promise例項的狀態轉移取決於引數的Promise例項的狀態變化。當引數中所有的例項都處於resolve狀態時，返回的Promise例項會變為resolve狀態。如果引數中任意一個例項處於reject狀態，返回的Promise例項變為reject狀態。
```
Promise.all([p1, p2]).then(function (result) {
  console.log(result); // [ '2.txt', '2' ]
});
複製程式碼
```
不管兩個promise誰先完成，Promise.all 方法會按照陣列裡面的順序將結果返回

7.2 Promise.race

引數：接受一個陣列，陣列內都是Promise例項
返回值：返回一個Promise例項，這個Promise例項的狀態轉移取決於引數的Promise例項的狀態變化。當引數中任何一個例項處於resolve狀態時，返回的Promise例項會變為resolve狀態。如果引數中任意一個例項處於reject狀態，返回的Promise例項變為reject狀態。
```
Promise.race([p1, p2]).then(function (result) {
  console.log(result); // [ '2.txt', '2' ]
});
複製程式碼
```
7.3 Promise.resolve
返回一個Promise例項，這個例項處於resolve狀態。

根據傳入的引數不同有不同的功能：

值(物件、陣列、字串等)：作為resolve傳遞出去的值
Promise例項：原封不動返回

7.4 Promise.reject

返回一個Promise例項，這個例項處於reject狀態。

引數一般就是丟擲的錯誤資訊。

8. q

Q是一個在Javascript中實現promise的模組

8.1 q的基本用法

var Q = require('q');
var fs = require('fs');
function read(filename) {
    var deferred = Q.defer();
    fs.readFile(filename,'utf8', function (err, data) {
        if(err){
            deferred.reject(err);
        }else{
            deferred.resolve(data);
        }
    });
    return deferred.promise;
}

read('1.txt1').then(function(data){
    console.log(data);
},function(error){
    console.error(error);
});
複製程式碼

8.2 q的簡單實現

module.exports = {
    defer(){
        var _success,_error;
        return {
            resolve(data){
                _success(data);
            },
            reject(err){
                _error(err);
            },
            promise:{
                then(success,error){
                    _success = success;
                    _error = error;
                }
            }
        }
    }
}
複製程式碼

8.3 q的實現

var defer = function () {
    var pending = [], value;
    return {
        resolve: function (_value) {
            if (pending) {
                value = _value;
                for (var i = 0, ii = pending.length; i < ii; i++) {
                    var callback = pending[i];
                    callback(value);
                }
                pending = undefined;
            }
        },
        promise: {
            then: function (callback) {
                if (pending) {
                    pending.push(callback);
                } else {
                    callback(value);
                }
            }
        }
    };
};
複製程式碼

9. bluebird

實現 promise 標準的庫是功能最全，速度最快的一個庫

9.1 bluebird經典使用

var Promise = require('./bluebird');

var readFile = Promise.promisify(require("fs").readFile);
readFile("1.txt", "utf8").then(function(contents) {
    console.log(contents);
})

var fs = Promise.promisifyAll(require("fs"));

fs.readFileAsync("1.txt", "utf8").then(function (contents) {
    console.log(contents);
})

複製程式碼

9.2 bluebird簡單實現

module.exports = {
    promisify(fn){
        return function () {
            var args = Array.from(arguments);
            return new Promise(function (resolve, reject) {
                fn.apply(null, args.concat(function (err) {
                    if (err) {
                        reject(err);
                    } else {
                        resolve(arguments[1])
                    }
                }));
            })
        }
    },
    promisifyAll(obj){
        for(var attr in obj){
            if(obj.hasOwnProperty(attr) && typeof obj[attr] =='function'){
                obj[attr+'Async'] = this.promisify(obj[attr]);
            }
        }
        return obj;
    }
}
複製程式碼

10. 動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>move</title>
    <style>
        .square{
            width:40px;
            height:40px;
            border-radius: 50%;
        }
        .square1{
            background-color: red;
        }
        .square2{
            background-color: yellow;
        }
        .square3{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="square square1" style="margin-left: 0"></div>
<div class="square square2" style="margin-left: 0"></div>
<div class="square square3" style="margin-left: 0"></div>
</body>
<script>
  var square1 = document.querySelector('.square1');
  var square2 = document.querySelector('.square2');
  var square3 = document.querySelector('.square3');

  /*function move(element,target,resolve){
    let timer = setInterval(function(){
      var marginLeft = parseInt(element.style.marginLeft, 10);
      if(marginLeft == target){
        resolve();
      }else{
        element.style.marginLeft = ++marginLeft+'px';
      }
    },13);
  }*/
  function move(element,target,resolve){
    let current = 0;
    let timer = setInterval(function(){
      element.style.transform=`translateX(${++current}px)`;
      if(current>target){
        clearInterval(timer);
        resolve();
      };
    },13);
  }
  function animate(element,target){
    return new Promise(function(resolve,reject){
      move(element,target,resolve);
    });
  }
  animate(square1,100)
    .then(function(){
      return animate(square2,100);
    })
    .then(function(){
      return animate(square3,100);
    });
</script>
</html>
複製程式碼

11. co

11.1 co初體驗

let fs = require('fs');
function getNumber(){
  return new Promise(function (resolve,reject) {
    setTimeout(function(){
      let number = Math.random();
      if(number >.5){
        resolve(number);
      }else{
        reject('數字太小');
      }
    },1000);
  });
}
function *read(){
  let a = yield getNumber();
  console.log(a);
  let b = yield 'b';
  console.log(b);
  let c = yield getNumber();
  console.log(c);
}

function co(gen){
  return new Promise(function(resolve,reject){
    let g = gen();
    function next(lastValue){
      let {done,value} = g.next(lastValue);
      if(done){
         resolve(lastValue);
      }else{
        if(value instanceof Promise){
          value.then(next,function(val){
            reject(val);
          });
        }else{
          next(value);
        }
      }
    }
    next();
  });
}
co(read).then(function(data){
  console.log(data);
},function(reason){
  console.log(reason);
});
複製程式碼

11.2 co連續讀檔案

let fs = require('fs');
function readFile(filename){
  return new Promise(function (resolve,reject) {
    fs.readFile(filename,'utf8',function(err,data){
      if(err)
        reject(err);
      else
        resolve(data);
    })
  });
}
function *read(){
  let a = yield readFile('./1.txt');
  console.log(a);
  let b = yield readFile('./2.txt');
  console.log(b);
}

function co(gen){
  let g = gen();
  function next(val){
    let {done,value} = g.next(val);
    if(!done){
      value.then(next);
    }
  }
  next();
}
複製程式碼

12. Promise/A+完整實現

function Promise(executor) {
  let self = this;
  self.status = "pending";
  self.value = undefined;
  self.onResolvedCallbacks = [];
  self.onRejectedCallbacks = [];
  function resolve(value) {
    if (value instanceof Promise) {
      return value.then(resolve, reject)
    }
    setTimeout(function () { // 非同步執行所有的回撥函式
      if (self.status == 'pending') {
        self.value = value;
        self.status = 'resolved';
        self.onResolvedCallbacks.forEach(item => item(value));
      }
    });

  }

  function reject(value) {
    setTimeout(function () {
      if (self.status == 'pending') {
        self.value = value;
        self.status = 'rejected';
        self.onRejectedCallbacks.forEach(item => item(value));
      }
    });
  }

  try {
    executor(resolve, reject);
  } catch (e) {
    reject(e);
  }
}
function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('迴圈引用'));
  }
  let then, called;

  if (x != null && ((typeof x == 'object' || typeof x == 'function'))) {
    try {
      then = x.then;
      if (typeof then == 'function') {
        then.call(x, function (y) {
          if (called)return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, function (r) {
          if (called)return;
          called = true;
          reject(r);
        });
      } else {
        resolve(x);
      }
    } catch (e) {
      if (called)return;
      called = true;
      reject(e);
    }
  } else {
    resolve(x);
  }
}
Promise.prototype.then = function (onFulfilled, onRejected) {
  let self = this;
  onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : function (value) {
    return value
  };
  onRejected = typeof onRejected == 'function' ? onRejected : function (value) {
    throw value
  };
  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 = onRejected(self.value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    });
  }
  if (self.status == 'pending') {
    promise2 = new Promise(function (resolve, reject) {
      self.onResolvedCallbacks.push(function (value) {
        try {
          let x = onFulfilled(value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
      self.onRejectedCallbacks.push(function (value) {
        try {
          let x = onRejected(value);
          resolvePromise(promise2, x, resolve, reject);
        } catch (e) {
          reject(e);
        }
      });
    });
  }
  return promise2;
}
Promise.prototype.catch = function (onRejected) {
  return this.then(null, onRejected);
}
Promise.all = function (promises) {
  return new Promise(function (resolve, reject) {
    let result = [];
    let count = 0;
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(function (data) {
        result[i] = data;
        if (++count == promises.length) {
          resolve(result);
        }
      }, function (err) {
        reject(err);
      });
    }
  });
}

Promise.deferred = Promise.defer = function () {
  var defer = {};
  defer.promise = new Promise(function (resolve, reject) {
    defer.resolve = resolve;
    defer.reject = reject;
  })
  return defer;
}
/**
 * npm i -g promises-aplus-tests
 * promises-aplus-tests Promise.js
 */
try {
  module.exports = Promise
} catch (e) {
}
複製程式碼

Promise核心實現
2020-09-12
Promise
學習Promise && 簡易實現Promise
2018-05-30
Promise
實現一個promise
2018-12-11
Promise
Promise 簡單實現
2019-02-26
Promise
實現自己的promise
2018-12-21
Promise
Promise原始碼實現
2018-05-20
Promise原始碼
promise實現過程
2018-05-19
Promise
promise基本實現思路
2018-06-12
Promise
Promise 程式碼實現
2019-01-01
Promise
Promise 方法的實現
2023-02-08
Promise
Promise進階——如何實現一個Promise庫
2019-01-02
Promise
簡單版Promise實現
2019-03-30
Promise
實現promise.all方法
2019-01-15
Promise
Promise的實現(step by step)
2018-05-01
Promise
Promise原理探究及實現
2019-07-18
Promise
Es6 Promise 實現
2019-05-30
Promise
Promise的實現及解析
2018-03-23
Promise
promise的模擬實現
2018-03-17
Promise
Promise 原始碼：實現一個簡單的 Promise
2018-05-21
Promise原始碼
Promise的祕密（Promise原理解析以及實現）
2019-10-13
Promise
實現一個Promise(基於Promise/A+規範)
2019-01-02
Promise
Promise原理講解 && 實現一個Promise物件 (遵循Promise/A+規範)
2019-03-04
Promise物件
手寫實現滿足 Promise/A+ 規範的 Promise
2018-12-07
Promise
實現一個完美符合Promise/A+規範的Promise
2018-07-02
Promise
Promise的原始碼實現（完美符合Promise/A+規範）
2019-03-13
Promise原始碼
按照 Promise/A+ 規範逐行註釋並實現 Promise
2022-04-01
Promise
Promise實現原理（附原始碼）
2018-09-15
Promise原始碼
實現一個完整的promise
2018-06-21
Promise
從0到1實現Promise
2018-09-28
Promise
lua版promise實現 - 結束
2024-08-16
Promise
promise原理—一步一步實現一個promise
2019-04-27
Promise
精簡的非同步Promise實現
2018-11-02
非同步Promise
老生常談-實現一個Promise
2018-12-10
Promise
用原生js手寫實現promise
2019-04-14
JSPromise
Promise的分層解析及實現
2019-02-28
Promise
Promise的使用及簡單實現
2018-05-29
Promise
ES6 Promise 及實現原理
2018-08-29
Promise
70行實現Promise核心原始碼
2020-05-05
Promise原始碼