BAT前端經典面試問題：史上最最最詳細的手寫Promise教程

Carus發表於2018-06-27

我們工作中免不了運用promise用來解決非同步回撥問題。平時用的很多庫或者外掛都運用了promise 例如axios、fetch等等。但是你知道promise是咋寫出來的呢？

別怕～這裡有本promisesA+規範，便宜點10元賣給你了。

1、Promise 的宣告

首先呢，promise肯定是一個類，我們就用class來宣告。

由於new Promise((resolve, reject)=>{})，所以傳入一個引數（函式），祕籍裡叫他executor，傳入就執行。
executor裡面有兩個引數，一個叫resolve（成功），一個叫reject（失敗）。
由於resolve和reject可執行，所以都是函式，我們用let宣告。

class Promise{
  // 構造器
  constructor(executor){
    // 成功
    let resolve = () => { };
    // 失敗
    let reject = () => { };
    // 立即執行
    executor(resolve, reject);
  }
}
複製程式碼

解決基本狀態

祕籍對Promise有規定：

Promise存在三個狀態（state）pending、fulfilled、rejected
pending（等待態）為初始態，並可以轉化為fulfilled（成功態）和rejected（失敗態）
成功時，不可轉為其他狀態，且必須有一個不可改變的值（value）
失敗時，不可轉為其他狀態，且必須有一個不可改變的原因（reason）
new Promise((resolve, reject)=>{resolve(value)}) resolve為成功，接收引數value，狀態改變為fulfilled，不可再次改變。
new Promise((resolve, reject)=>{reject(reason)}) reject為失敗，接收引數reason，狀態改變為rejected，不可再次改變。
若是executor函式報錯直接執行reject();

於是乎，我們獲得以下程式碼

class Promise{
  constructor(executor){
    // 初始化state為等待態
    this.state = 'pending';
    // 成功的值
    this.value = undefined;
    // 失敗的原因
    this.reason = undefined;
    let resolve = value => {
      // state改變,resolve呼叫就會失敗
      if (this.state === 'pending') {
        // resolve呼叫後，state轉化為成功態
        this.state = 'fulfilled';
        // 儲存成功的值
        this.value = value;
      }
    };
    let reject = reason => {
      // state改變,reject呼叫就會失敗
      if (this.state === 'pending') {
        // reject呼叫後，state轉化為失敗態
        this.state = 'rejected';
        // 儲存失敗的原因
        this.reason = reason;
      }
    };
    // 如果executor執行報錯，直接執行reject
    try{
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
}

複製程式碼

then方法

祕籍規定:Promise有一個叫做then的方法，裡面有兩個引數：onFulfilled,onRejected,成功有成功的值，失敗有失敗的原因

當狀態state為fulfilled，則執行onFulfilled，傳入this.value。當狀態state為rejected，則執行onRejected，傳入this.reason
onFulfilled,onRejected如果他們是函式，則必須分別在fulfilled，rejected後被呼叫，value或reason依次作為他們的第一個引數

class Promise{
  constructor(executor){...}
  // then 方法 有兩個引數onFulfilled onRejected
  then(onFulfilled,onRejected) {
    // 狀態為fulfilled，執行onFulfilled，傳入成功的值
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    };
    // 狀態為rejected，執行onRejected，傳入失敗的原因
    if (this.state === 'rejected') {
      onRejected(this.reason);
    };
  }
}
複製程式碼

這下武學初成，可以對付對付江湖小雜毛了，但是對於帶setTimeout的江洋大盜還是沒轍。

解決非同步實現

現在基本可以實現簡單的同步程式碼，但是當resolve在setTomeout內執行，then時state還是pending等待狀態我們就需要在then呼叫的時候，將成功和失敗存到各自的陣列，一旦reject或者resolve，就呼叫它們

類似於釋出訂閱，先將then裡面的兩個函式儲存起來，由於一個promise可以有多個then，所以存在同一個陣列內。

// 多個then的情況
let p = new Promise();
p.then();
p.then();
複製程式碼

成功或者失敗時，forEach呼叫它們

class Promise{
  constructor(executor){
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    // 成功存放的陣列
    this.onResolvedCallbacks = [];
    // 失敗存放法陣列
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        // 一旦resolve執行，呼叫成功陣列的函式
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    };
    let reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        // 一旦reject執行，呼叫失敗陣列的函式
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    };
    try{
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled,onRejected) {
    if (this.state === 'fulfilled') {
      onFulfilled(this.value);
    };
    if (this.state === 'rejected') {
      onRejected(this.reason);
    };
    // 當狀態state為pending時
    if (this.state === 'pending') {
      // onFulfilled傳入到成功陣列
      this.onResolvedCallbacks.push(()=>{
        onFulfilled(this.value);
      })
      // onRejected傳入到失敗陣列
      this.onRejectedCallbacks.push(()=>{
        onRejected(this.reason);
      })
    }
  }
}
複製程式碼

解決鏈式呼叫

我門常常用到new Promise().then().then(),這就是鏈式呼叫，用來解決回撥地獄

1、為了達成鏈式，我們預設在第一個then裡返回一個promise。祕籍規定了一種方法，就是在then裡面返回一個新的promise,稱為promise2：promise2 = new Promise((resolve, reject)=>{})

將這個promise2返回的值傳遞到下一個then中
如果返回一個普通的值，則將普通的值傳遞給下一個then中

2、當我們在第一個then中return了一個引數（引數未知，需判斷）。這個return出來的新的promise就是onFulfilled()或onRejected()的值

祕籍則規定onFulfilled()或onRejected()的值，即第一個then返回的值，叫做x，判斷x的函式叫做resolvePromise

首先，要看x是不是promise。
如果是promise，則取它的結果，作為新的promise2成功的結果
如果是普通值，直接作為promise2成功的結果
所以要比較x和promise2
resolvePromise的引數有promise2（預設返回的promise）、x（我們自己return的物件）、resolve、reject
resolve和reject是promise2的

class Promise{
  constructor(executor){
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    };
    let reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    };
    try{
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled,onRejected) {
    // 宣告返回的promise2
    let promise2 = new Promise((resolve, reject)=>{
      if (this.state === 'fulfilled') {
        let x = onFulfilled(this.value);
        // resolvePromise函式，處理自己return的promise和預設的promise2的關係
        resolvePromise(promise2, x, resolve, reject);
      };
      if (this.state === 'rejected') {
        let x = onRejected(this.reason);
        resolvePromise(promise2, x, resolve, reject);
      };
      if (this.state === 'pending') {
        this.onResolvedCallbacks.push(()=>{
          let x = onFulfilled(this.value);
          resolvePromise(promise2, x, resolve, reject);
        })
        this.onRejectedCallbacks.push(()=>{
          let x = onRejected(this.reason);
          resolvePromise(promise2, x, resolve, reject);
        })
      }
    });
    // 返回promise，完成鏈式
    return promise2;
  }
}
複製程式碼

完成resolvePromise函式

祕籍規定了一段程式碼，讓不同的promise程式碼互相套用，叫做resolvePromise

如果 x === promise2，則是會造成迴圈引用，自己等待自己完成，則報“迴圈引用”錯誤

let p = new Promise(resolve => {
  resolve(0);
});
var p2 = p.then(data => {
  // 迴圈引用，自己等待自己完成，一輩子完不成
  return p2;
})
複製程式碼

1、判斷x

Otherwise, if x is an object or function,Let then be x.then
x 不能是null
x 是普通值直接resolve(x)
x 是物件或者函式（包括promise），let then = x.then 2、當x是物件或者函式（預設promise）
宣告瞭then
如果取then報錯，則走reject()
如果then是個函式，則用call執行then，第一個引數是this，後面是成功的回撥和失敗的回撥
如果成功的回撥還是pormise，就遞迴繼續解析 3、成功和失敗只能呼叫一個所以設定一個called來防止多次呼叫

function resolvePromise(promise2, x, resolve, reject){
  // 迴圈引用報錯
  if(x === promise2){
    // reject報錯
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  // 防止多次呼叫
  let called;
  // x不是null 且x是物件或者函式
  if (x != null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      // A+規定，宣告then = x的then方法
      let then = x.then;
      // 如果then是函式，就預設是promise了
      if (typeof then === 'function') { 
        // 就讓then執行 第一個引數是this   後面是成功的回撥 和 失敗的回撥
        then.call(x, y => {
          // 成功和失敗只能呼叫一個
          if (called) return;
          called = true;
          // resolve的結果依舊是promise 那就繼續解析
          resolvePromise(promise2, y, resolve, reject);
        }, err => {
          // 成功和失敗只能呼叫一個
          if (called) return;
          called = true;
          reject(err);// 失敗了就失敗了
        })
      } else {
        resolve(x); // 直接成功即可
      }
    } catch (e) {
      // 也屬於失敗
      if (called) return;
      called = true;
      // 取then出錯了那就不要在繼續執行了
      reject(e); 
    }
  } else {
    resolve(x);
  }
}
複製程式碼

解決其他問題

1、祕籍規定onFulfilled,onRejected都是可選引數，如果他們不是函式，必須被忽略

onFulfilled返回一個普通的值，成功時直接等於 value => value
onRejected返回一個普通的值，失敗時如果直接等於 value => value，則會跑到下一個then中的onFulfilled中，所以直接扔出一個錯誤reason => throw err 2、祕籍規定onFulfilled或onRejected不能同步被呼叫，必須非同步呼叫。我們就用setTimeout解決非同步問題
如果onFulfilled或onRejected報錯，則直接返回reject()

class Promise{
  constructor(executor){
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    };
    let reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    };
    try{
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled,onRejected) {
    // onFulfilled如果不是函式，就忽略onFulfilled，直接返回value
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    // onRejected如果不是函式，就忽略onRejected，直接扔出錯誤
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
    let promise2 = new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        // 非同步
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'rejected') {
        // 非同步
        setTimeout(() => {
          // 如果報錯
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'pending') {
        this.onResolvedCallbacks.push(() => {
          // 非同步
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          // 非同步
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
      };
    });
    // 返回promise，完成鏈式
    return promise2;
  }
}
複製程式碼

大功告成

順便附贈catch和resolve、reject、race、all方法

class Promise{
  constructor(executor){
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = value => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onResolvedCallbacks.forEach(fn=>fn());
      }
    };
    let reject = reason => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
        this.onRejectedCallbacks.forEach(fn=>fn());
      }
    };
    try{
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }
  then(onFulfilled,onRejected) {
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err };
    let promise2 = new Promise((resolve, reject) => {
      if (this.state === 'fulfilled') {
        setTimeout(() => {
          try {
            let x = onFulfilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'rejected') {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      };
      if (this.state === 'pending') {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
      };
    });
    return promise2;
  }
  catch(fn){
    return this.then(null,fn);
  }
}
function resolvePromise(promise2, x, resolve, reject){
  if(x === promise2){
    return reject(new TypeError('Chaining cycle detected for promise'));
  }
  let called;
  if (x != null && (typeof x === 'object' || typeof x === 'function')) {
    try {
      let then = x.then;
      if (typeof then === 'function') { 
        then.call(x, y => {
          if(called)return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, err => {
          if(called)return;
          called = true;
          reject(err);
        })
      } else {
        resolve(x);
      }
    } catch (e) {
      if(called)return;
      called = true;
      reject(e); 
    }
  } else {
    resolve(x);
  }
}
//resolve方法
Promise.resolve = function(val){
  return new Promise((resolve,reject)=>{
    resolve(val)
  });
}
//reject方法
Promise.reject = function(val){
  return new Promise((resolve,reject)=>{
    reject(val)
  });
}
//race方法 
Promise.race = function(promises){
  return new Promise((resolve,reject)=>{
    for(let i=0;i<promises.length;i++){
      promises[i].then(resolve,reject)
    };
  })
}
//all方法(獲取所有的promise，都執行then，把結果放到陣列，一起返回)
Promise.all = function(promises){
  let arr = [];
  let i = 0;
  function processData(index,data){
    arr[index] = data;
    i++;
    if(i == promises.length){
      resolve(arr);
    };
  };
  return new Promise((resolve,reject)=>{
    for(let i=0;i<promises.length;i++){
      promises[i].then(data=>{
        processData(i,data);
      },reject);
    };
  });
}
複製程式碼

如何驗證我們的promise是否正確

1、先在後面加上下述程式碼

2、npm 有一個promises-aplus-tests外掛 npm i promises-aplus-tests -g 可以全域性安裝 mac使用者最前面加上sudo

3、命令列 promises-aplus-tests [js檔名] 即可驗證

// 目前是通過他測試 他會測試一個物件
// 語法糖
Promise.defer = Promise.deferred = function () {
  let dfd = {}
  dfd.promise = new Promise((resolve,reject)=>{
    dfd.resolve = resolve;
    dfd.reject = reject;
  });
  return dfd;
}
module.exports = Promise;
//npm install promises-aplus-tests 用來測試自己的promise 符不符合promisesA+規範
複製程式碼

史上最最最詳細的手寫Promise教程
2018-06-28
Promise
史上最詳細的經典面試題從輸入URL到看到頁面發生了什麼？
2019-04-28
面試題
騰訊前端一面經典手寫面試題合集
2023-02-26
前端面試題
最最最通俗易懂的promise手寫系列（一）
2018-07-25
Promise
BAT經典面試題彙總
2017-12-28
BAT面試題
2023前端二面經典手寫面試題
2023-03-02
前端面試題
史上最詳細的一線大廠Mysql面試題詳解
2019-03-30
MySql面試題
前端經典面試題
2024-08-21
前端面試題
5個經典的前端面試問題
2014-09-28
前端面試
手寫 Promise 詳細解讀
2020-01-03
Promise
最最最通俗易懂的promise手寫系列（二）- 鏈式呼叫
2019-02-28
Promise
前端面試考點之---手寫Promise
2018-08-31
前端面試Promise
前端經典面試題（有答案）
2023-03-06
前端面試題
前端js和css的經典面試題
2017-11-26
前端JSCSS面試題
LeetCode 74，直擊BAT經典面試題
2020-06-04
LeetCodeBAT面試題
史上最詳細 iPad 插畫入門教程
2016-02-01
iPad
JavaScript經典面試題詳解
2018-08-22
JavaScript面試題
2019 CSS經典面試題（史上最全）
2019-04-28
CSS面試題
BAT面試經典送送送命題——微服務架構
2019-01-02
BAT面試微服務架構
史上最全最強SpringMVC詳細示例實戰教程
2024-04-09
SpringMVC
手撕面試官系列：BAT面試常問85題
2019-08-02
面試BAT
Kafka詳細教程加面試題
2021-09-06
Kafka面試題
git常用命令（史上最經典）
2018-10-14
Git
史上最為詳細的javascript繼承
2019-05-16
JavaScript繼承
史上最經典千鋒Linux最新影片教程免費領取
2019-12-16
Linux
經典面試題
2019-04-03
面試題
18年最新經典web前端面試題
2018-09-26
Web前端面試題
那些web前端經典面試題大全及答案
2018-01-16
Web前端面試題
史上最詳細的Hadoop環境搭建
2018-08-15
Hadoop
史上最詳細的JavaScript事件使用指南
2015-05-19
JavaScript事件
BAT經典面試題，深入理解Java記憶體模型JMM
2019-05-18
BAT面試題Java記憶體模型
Kotlin系列教程——史上最全面、最詳細的學習教程，持續更新中....
2018-06-12
Kotlin
最經典的黑客入門教程
2014-04-03
黑客
騰訊前端二面手寫面試題
2023-02-07
前端面試題
[Java面試]經典手撕
2024-07-09
Java面試
promise專題--手寫promise03
2020-11-03
Promise
70個經典的 Shell 指令碼面試問題
2015-06-13
指令碼面試
5個經典的JavaScript面試基礎問題
2014-09-24
JavaScript面試