一、promise解決了哪些問題？

異步并發待所有異步任務結束之后再執行我們的業務邏輯，
回呼嵌套

二、promise特點

1. 每個promise都有三個狀態，pending等待狀態 fulfilled成功態 rejected失敗態 2. 狀態不可逆（若狀態變成了成功態，則會一直維持這個狀態） 3. 每個promise都有一個then方法傳入兩個引數一個是成功回呼（引數是resolve執行時傳的值）一個是失敗回呼（引數是reject執行時傳的值） 4. new Promise是同步執行的 5. 拋出例外的話也會變成失敗狀態走失敗的回呼

三、簡單示例

    new Promise((resolve,reject) => {
      // 1.狀態從pending改為fulfilled成功態，執行成功的回呼
      resolve('success')
      // 2.狀態從pending改為rejected失敗態，執行失敗的回呼
      // reject('fail')
      // throw new Error('fail')
    }).then((data) => {
      console.log('success', data);
    }, (err) => {
      console.log('fail', err);
    })

四、手寫實作

0.0.1版

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(executor) {
    // 初始狀態為pending等待狀態
    this.status = PENDING;
    const resolve = (value) => {
      // 執行resolve狀態變為成功態
      this.status = FULFILLED;
    };
    const reject = (reason) => {
      // 執行reject狀態變為失敗態
      this.status = REJECTED;
    };
    try {
      // 執行傳入的回呼函式
      executor(resolve, reject);
    } catch (e) {
      // 回呼函式執行出錯，也會執行reject
      reject(e);
    }
  }
}

由于promise的狀態一旦轉成了成功態或者失敗態，就不能再改變狀態了，所以我們需要加個判斷，只有當狀態為pending等待態的時候，才能將狀態改為成功或失敗，所以當狀態變為了成功，再去呼叫resolve的話，無法滿足判斷條件，就不會繼續執行了，

0.0.2版

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(executor) {
    // 初始狀態為pending等待狀態
    this.status = PENDING;
    const resolve = (value) => {
      // 執行resolve狀態變為成功態
      if (this.status === PENDING) {
        this.status = FULFILLED;
      }
    };
    const reject = (reason) => {
      // 執行reject狀態變為失敗態
      if (this.status === PENDING) {
        this.status = REJECTED;
      }
    };
    try {
      // 執行傳入的回呼函式
      executor(resolve, reject);
    } catch (e) {
      // 回呼函式執行出錯，也會執行reject
      reject(e);
    }
  }
}

這樣呼叫的話，狀態改變之后就不會再改了

    let p = new MyPromise((resolve,reject) => {
      resolve('success')
      reject('success')
    })
    console.log('p: ', p);

接下來我們實作一下promise實體的then方法，then方法的特點在上面有提到哦

0.0.3版

class MyPromise {
  constructor(executor) {
    // 賦值到this上是為了方便在then方法中呼叫
    // 初始狀態為pending等待狀態
    this.status = PENDING;
    // 成功回呼的引數
    this.value =https://www.cnblogs.com/zhengrongbaba/p/ undefined;
    // 失敗回呼的引數
    this.reason = undefined;
    const resolve = (value) => {
      // 執行resolve狀態變為成功態 保存用戶傳入的引數
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value =https://www.cnblogs.com/zhengrongbaba/p/ value;
      }
    };
    const reject = (reason) => {
      // 執行reject狀態變為失敗態 保存用戶傳入的引數
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;
      }
    };
    try {
      // 執行傳入的回呼函式
      executor(resolve, reject);
    } catch (e) {
      // 回呼函式執行出錯，也會執行reject
      reject(e);
    }
  }
  // 接收兩個函式作為引數，引數是用戶傳的，傳的第一個回呼就代表成功的回呼，傳的第二個回呼就代表失敗的回呼
  then(onFulfilled, onRejected) {
    // 根據當前的狀態，執行對應的回呼，回呼的引數為用戶呼叫resolve或者reject傳入的資料
    if (this.status === FULFILLED) {
      onFulfilled(this.value);
    }
    if (this.status === REJECTED) {
      onRejected(this.reason);
    }
  }
}

呼叫時

    let p = new MyPromise((resolve,reject) => {
      resolve('success')
    })
    p.then((value) => {
      console.log(value);// success
    }, (reason) => {
      console.log(reason);
    })

但是如果是在異步代碼里面呼叫resolve方法，就不會執行成功回呼了，例如：

    let p = new MyPromise((resolve,reject) => {
      setTimeout(() => {
        resolve('success')
      }, 300);
    })
    p.then((value) => {
      console.log(value);// success
    }, (reason) => {
      console.log(reason);
    })

這是因為代碼執行到settimeout，會將回呼放入宏任務佇列，而不是立即執行，所以會先執行then方法，這個時候settimeout并未執行，所以resolve也未執行，此時的status = 'pending'，then方法的兩個回呼都不會執行，

因此，我們想要執行異步代碼里的resolve或者reject函式的話，需要在執行then方法的時候，先把成功回呼或失敗回呼先存起來，直到異步代碼執行到resolve，再依次執行回呼，實作方式就是采用發布訂閱模式，借助兩個陣列，一個是成功回呼的陣列，一個是失敗回呼的陣列，在呼叫then時，若status = pending，就把回呼存入對應的陣列，之后在resolve（reject）函式中依次呼叫成功（失敗）回呼的陣列的回呼，

0.0.4版

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(executor) {
    // 初始狀態為pending等待狀態
    this.status = PENDING;
    // 成功回呼的引數
    this.value =https://www.cnblogs.com/zhengrongbaba/p/ undefined;
    // 失敗回呼的引數
    this.reason = undefined;
    this.onFulFilledCallbacks = []; // 存放成功的回呼
    this.onRejectedCallbacks = []; // 存放失敗的回呼
    const resolve = (value) => {
      // 執行resolve狀態變為成功態 保存用戶傳入的引數
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value =https://www.cnblogs.com/zhengrongbaba/p/ value;
        this.onFulFilledCallbacks.forEach((fn) => fn()); // 依次執行成功回呼佇列的回呼
      }
    };
    const reject = (reason) => {
      // 執行reject狀態變為失敗態 保存用戶傳入的引數
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;
        this.onRejectedCallbacks.forEach((fn) => fn()); // 依次執行失敗回呼佇列的回呼
      }
    };
    try {
      // 執行傳入的回呼函式
      executor(resolve, reject);
    } catch (e) {
      // 回呼函式執行出錯，也會執行reject
      reject(e);
    }
  }
  // 接收兩個函式作為引數，引數是用戶傳的，傳的第一個回呼就代表成功的回呼，傳的第二個回呼就代表失敗的回呼
  then(onFulfilled, onRejected) {
    // 根據當前的狀態，執行對應的回呼，回呼的引數為用戶呼叫resolve或者reject傳入的資料
    if (this.status === FULFILLED) {
      onFulfilled(this.value);
    }
    if (this.status === REJECTED) {
      onRejected(this.reason);
    }
    // 狀態為pending時 將用戶傳的回呼存放到各自的佇列中（若用戶沒有呼叫resolve或reject，則不會執行佇列中的回呼）
    if (this.status === PENDING) {
      this.onFulFilledCallbacks.push(() => {
        onFulfilled(this.value);
      });
      this.onRejectedCallbacks.push(() => {
        onRejected(this.reason);
      });
    }
  }
}

呼叫時

    let p = new MyPromise((resolve,reject) => {
      setTimeout(() => {
        resolve('success')
      }, 300);
    })
    p.then((value) => {
      console.log(value, 1);// success 1
    }, (reason) => {
      console.log(reason);
    })
    p.then((value) => {
      console.log(value, 2);// success 2
    }, (reason) => {
      console.log(reason);
    })

接下來我們來分析then鏈式呼叫的規則

(1)如果then方法中成功回呼或失敗回呼回傳的是一個非promise值，則將這個值傳遞給外層下一次then的成功回呼引數

(2)如果then方法中成功回呼或失敗回呼的執行報錯了，則將錯誤資訊傳遞給外層下一次then的失敗回呼引數

    let pp = new Promise((resolve,reject) => {
      resolve(1)
    }).then((data) => {
      console.log('第一次 success', data);//第一次 success 1
      return 100;
      // throw new Error('error')
    }, (err) => {
      console.log('第一次 fail', err);
    }).then((data) => {
      console.log('第二次 success', data);//第二次 success 100
    }, (err) => {
      console.log('第二次 fail', err);
    })

(3)如果then方法中成功回呼回傳的是一個promise值，

若在回傳的這個promise內部呼叫了resolve函式，則將傳入resolve的引數傳遞給外層下一次then的成功回呼引數；
若在回傳的這個promise內部呼叫了reject函式，則將傳入reject的引數，傳遞給外層下一次then的失敗回呼引數；

    let pp2 = new Promise((resolve,reject) => {
      resolve(1)
    }).then((data) => {
      console.log('第一次 success', data);//第一次 success 1
      return new Promise((resolve, reject) => {
        resolve(100);
        // reject(200)
      });
    }, (err) => {
      console.log('第一次 fail', err);
    }).then((data) => {
      console.log('第二次 success', data);//第二次 success 100
    }, (err) => {
      console.log('第二次 fail', err);
    })

(4)catch方法相當于then(null, err => {})

    let pp2 = new Promise((resolve,reject) => {
      resolve(1)
    }).then((data) => {
      console.log('第一次 success', data);//第一次 success 1
      return new Promise((resolve, reject) => {
        // resolve(100);
        reject(200);
      });
    }, (err) => {
      console.log('第一次 fail', err);
    }).catch((data) => {
      console.log('第二次 fail', data);//第二次 fail 200
    });

then的鏈式呼叫是如何實作的？

每次呼叫then，回傳一個新的promise實體，這個實體上肯定也有then方法，就可以一直.then下去

0.0.5版

class MyPromise {
  constructor(executor) {
    // 省略了跟上一版一樣的內容
  }
  then(onFulfilled, onRejected) {
    // 呼叫then的時候 會創建一個新的promise實體并回傳
    let promise2 = new MyPromise((resolve, reject) => {
      // 這里面的resolve和reject是promise2的 當在promise2里面呼叫resolve，就會執行promise2.then里面的成功回呼
      if (this.status === FULFILLED) {
        // 需要拿到成功回呼的回傳值，傳遞給下一個then
        let x = onFulfilled(this.value);
        resolve(x);
      }
      if (this.status === REJECTED) {
        let x = onRejected(this.reason);
        resolve(x);
      }
      if (this.status === PENDING) {
        this.onFulFilledCallbacks.push(() => {
          let x = onFulfilled(this.value);
          resolve(x);
        });
        this.onRejectedCallbacks.push(() => {
          let x = onRejected(this.reason);
          resolve(x);
        });
      }
    });
    return promise2;
  }
}

這里涉及到MyPromise函式的遞回執行，在呼叫函式時進行拆分，就好分析了

    let pp = new Promise((resolve,reject) => {
      // resolve(1)
      reject(1)
    })
    // 呼叫pp的then會回傳promise2
    let promise2 = pp.then(data =https://www.cnblogs.com/zhengrongbaba/p/> {
      // 執行pp的成功回呼 回傳普通值x 會觸發promise2的成功回呼 相當于在這個promise2的內部呼叫resolve(x)
      // return 100;
    }, err => {
      // 執行pp的失敗回呼 也會觸發promise2的成功回呼
      return 100;
    })
    promise2.then((data) => {
      console.log(data);// 100
    }, (err) => {
      console.log(err);
    })

上個版本只是實作了規則（1），處理的是成功或失敗回呼回傳非promise值的情況，下面處理一下成功或失敗的回呼在執行時發生報錯的情況，只需要加上try catch即可

0.0.6版

class MyPromise {
  constructor(executor) {
    // 此處省略
  }
  then(onFulfilled, onRejected) {
    // 呼叫then的時候 會創建一個新的promise實體并回傳
    let promise2 = new MyPromise((resolve, reject) => {
      // 這里面的resolve和reject是promise2的 當在promise2里面呼叫resolve，就會執行promise2.then里面的成功回呼
      if (this.status === FULFILLED) {
        // 需要拿到成功回呼的回傳值，傳遞給下一個then
        try {
          let x = onFulfilled(this.value);
          resolve(x);
        } catch (e) {
          reject(e);
        }
      }
      if (this.status === REJECTED) {
        try {
          let x = onRejected(this.reason);
          resolve(x);
        } catch (e) {
          reject(e);
        }
      }
      if (this.status === PENDING) {
        this.onFulFilledCallbacks.push(() => {
          try {
            let x = onFulfilled(this.value);
            resolve(x);
          } catch (e) {
            reject(e);
          }
        });
        this.onRejectedCallbacks.push(() => {
          try {
            let x = onRejected(this.reason);
            resolve(x);
          } catch (e) {
            reject(e);
          }
        });
      }
    });
    return promise2;
  }
}

接下來處理規則（3），也就是then方法中回傳一個promise值的情況，需要給回傳值注冊成功和失敗的回呼，成功回呼中執行promise2的resolve，失敗回呼中執行promise2的reject

規則（4）實際就是呼叫了then方法

0.0.7版（最終版）

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
function resolvePromise(x, promise2, resolve, reject) {
  // then中成功或失敗回呼的回傳值 不能和呼叫then方法回傳的promise值相等
  if (x === promise2) {
    return reject(new TypeError('出錯'));
  }
  if (x instanceof MyPromise) {
    try {
      let then = x.then; 
      then.call(
        x,
        (y) => {
          // y代表回傳的promise值內部呼叫resolve時傳的引數 傳給promise2的resolve方法并執行
          resolve(y);
        },
        (r) => {
          // r代表回傳的promise值內部呼叫reject時傳的引數 傳給promise2的reject方法并執行
          reject(r);
        },
      );
    } catch (e) {
      reject(e);
    }
  } else {
    // 非promise值
    resolve(x);
  }
}
class MyPromise {
  constructor(executor) {
    this.status = PENDING;
    this.value =https://www.cnblogs.com/zhengrongbaba/p/ undefined;
    this.reason = undefined;
    this.onFulFilledCallbacks = []; // 存放成功的回呼
    this.onRejectedCallbacks = []; // 存放失敗的回呼
    const resolve = (value) => {
      if (this.status === PENDING) {
        this.status = FULFILLED;
        this.value =https://www.cnblogs.com/zhengrongbaba/p/ value;
        this.onFulFilledCallbacks.forEach((fn) => fn()); // 依次執行成功回呼佇列的回呼
      }
    };
    const reject = (reason) => {
      if (this.status === PENDING) {
        this.status = REJECTED;
        this.reason = reason;
        this.onRejectedCallbacks.forEach((fn) => fn()); // 依次執行失敗回呼佇列的回呼
      }
    };
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
  then(onFulfilled, onRejected) {
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        // 使用settimeout是為了異步執行處理回傳值的代碼 否則直接使用promise2會報錯
        setTimeout(() => {
          // 需要拿到成功回呼的回傳值，傳遞給下一個then
          try {
            let x = onFulfilled(this.value);
            // 統一處理回傳值
            resolvePromise(x, promise2, resolve, reject);
          } catch (e) {
            console.log(e);
          }
        }, 0);
      }
      if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(x, promise2, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      }
      if (this.status === PENDING) {
        this.onFulFilledCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulfilled(this.value);
              resolvePromise(x, promise2, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(x, promise2, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    return promise2;
  }

catch(onRejected) { return this.then(null, onRejected); }

呼叫時

    let pp = new MyPromise((resolve,reject) => {
      resolve(1)
    })
    // 呼叫pp的then會回傳promise2
    let promise2 = pp.then(data =https://www.cnblogs.com/zhengrongbaba/p/> {
      // 執行pp的成功回呼 回傳promise值x 會給x注冊成功和失敗回呼，
      // 成功回呼中執行promise2的成功回呼，失敗回呼中執行promise2的失敗回呼
      return new MyPromise((res, rej) => {
        res(3000)
      })
    })
    // 若執行promise型別的回傳值的resolve，就會執行第一個回呼
    promise2.then((data) => {
      console.log(data);// 3000
    }, (err) => {
      console.log(err);
    })

好啦！終于整理完成了！看完之后是不是發現promise其實也沒那么難了！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/296363.html

標籤：JavaScript

上一篇：介紹一種組件拆分方法

下一篇：DI 原理決議并實作一個簡易版 DI 容器

基于promise a+規范手寫promise（promise其實沒那么難！）

一、promise解決了哪些問題？

二、promise特點

三、簡單示例

四、手寫實作