痞野糙汉最狠的5个cp,新婚之夜玩弄人妻系列,达泊西汀可以延时多久

代碼塊中的省略號，代表相較于上次代碼未改動部分

1）核心邏輯實現

分析：

根據調用方式可知，promise是一個類，需要傳遞一個執行器進去，執行器會立即執行
promise有三種狀態，分別為成功-fulfilled 失敗-rejected 等待-pending，一旦狀態確定就不可改變
pending > fulfilled
pending > rejected
resolve和reject函數是用來改變狀態的，resolve是成功，reject是失敗；
then接受兩個參數，如果狀態成功就調用成功回調函數（參數代表成功結果），否則就調用失敗回調（參數代表失敗原因）

分析完畢，開搞：

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(exector) {
    // exector是一個執行器，傳入resolve和reject方法，進入會立即執行，
    exector(this.resolve, this.reject);
  }
  // 實例對象上屬性，初始狀態為等待
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失敗后的原因
  reason = undefined;
  // 使用箭頭函數，讓this指向當前實例對象
  resolve = (value) => {
    // 判斷狀態不是等待，阻止執行
    if (this.status !== PENDING) return;
    // 將狀態改為成功，并保存成功值
    this.status = FULFILLED;
    this.value = value;
  };
  reject = (reason) => {
    if (this.status !== PENDING) return;
    // 將狀態改為失敗，并保存失敗原因
    this.status = REJECTED;
    this.reason = reason;
  };
  then(successCallback, failCallback) {
    if (this.status === FULFILLED) {
      // 調用成功回調，把結果返回
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      // 調用失敗回調，把錯誤信息返回
      failCallback(this.reason);
    }
  }
}

2）加入異步處理邏輯

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(exector) {
    // exector是一個執行器，傳入resolve和reject方法，進入會立即執行，
    exector(this.resolve, this.reject);
  }
  // 實例對象上屬性，初始狀態為等待
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失敗后的原因
  reason = undefined;
  // 定義成功回調和失敗回調參數
  successCallback = undefined;
  failCallback = undefined;
  // 使用箭頭函數，讓this指向當前實例對象
  resolve = (value) => {
    // 判斷狀態不是等待，阻止執行
    if (this.status !== PENDING) return;
    // 將狀態改為成功，并保存成功值
    this.status = FULFILLED;
    this.value = value;
    this.successCallback && this.successCallback(this.value);
  };
  reject = (reason) => {
    if (this.status !== PENDING) return;
    // 將狀態改為失敗，并保存失敗原因
    this.status = REJECTED;
    this.reason = reason;
    this.failCallback && this.failCallback(this.reason);
  };
  then(successCallback, failCallback) {
    if (this.status === FULFILLED) {
      // 調用成功回調，把結果返回
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      // 調用失敗回調，把錯誤信息返回
      failCallback(this.reason);
    } else {
      // 等待狀態，把成功和失敗回調暫存起來
      this.successCallback = successCallback;
      this.failCallback = failCallback;
    }
  }
}

3）then 方法多次調用

promise的then是可以被多次調用的，
如下例子，如果三個then調用，都是同步調用，則直接返回值即可；
如果是異步調用，那么成功回調和失敗回調應該是多個不同的；

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  }, 2000); 
 })

 promise.then(value => {
   console.log(1)
   console.log('resolve', value)  //resolve success
 })
 
 promise.then(value => {
  console.log(2)
  console.log('resolve', value) //resolve success
})

promise.then(value => {
  console.log(3)
  console.log('resolve', value) //resolve success
})

所以需要改進：把回調放進數組，待狀態確定后統一執行

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(exector) {
    // exector是一個執行器，傳入resolve和reject方法，進入會立即執行，
    exector(this.resolve, this.reject);
  }
  // 實例對象上屬性，初始狀態為等待
  status = PENDING;
  // 成功后的值
  value = undefined;
  // 失敗后的原因
  reason = undefined;
  // 定義成功回調和失敗回調參數，初始化空數組
  successCallback = [];
  failCallback = [];
  // 使用箭頭函數，讓this指向當前實例對象
  resolve = (value) => {
    // 判斷狀態不是等待，阻止執行
    if (this.status !== PENDING) return;
    // 將狀態改為成功，并保存成功值
    this.status = FULFILLED;
    this.value = value;
    while (this.successCallback.length) {
      this.successCallback.shift()(this.value);
    }
  };
  reject = (reason) => {
    if (this.status !== PENDING) return;
    // 將狀態改為失敗，并保存失敗原因
    this.status = REJECTED;
    this.reason = reason;
    while (this.failCallback.length) {
      this.failCallback.shift()(this.reason);
    }
  };
  then(successCallback, failCallback) {
    if (this.status === FULFILLED) {
      // 調用成功回調，把結果返回
      successCallback(this.value);
    } else if (this.status === REJECTED) {
      // 調用失敗回調，把錯誤信息返回
      failCallback(this.reason);
    } else {
      // 等待狀態，把成功和失敗回調暫存到數組中
      this.successCallback.push(successCallback);
      this.failCallback.push(failCallback);
    }
  }
}

4）then 方法鏈式調用

then方法會返回一個新的Promise實例。因此可以采用鏈式寫法
then方法可以返回一個普通值或者一個新的promise實例

返回普通值用法：

let promise = new Promise((resolve, reject) => {
  // 目前這里只處理同步的問題
  resolve('success');
});
promise
  .then((value) => {
    console.log('1', value); //  1 success
    return 'hello';
  })
  .then((value) => {
    console.log('2', value); //  2 hello
  });

返回新的promise實例用法：

let promise = new Promise((resolve, reject) => {
  // 目前這里只處理同步的問題
  resolve('success');
});
function other() {
  return new Promise((resolve, reject) => {
    resolve('other');
  });
}
promise
  .then((value) => {
    console.log('1', value); //  1 success
    return other();
  })
  .then((value) => {
    console.log('2', value); //  2 other
  });

實現：

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(exector) {
    exector(this.resolve, this.reject);
  }

  status = PENDING;
  value = undefined;
  reason = undefined;
  successCallback = [];
  failCallback = [];

  resolve = (value) => {
    if (this.status !== PENDING) return;
    this.status = FULFILLED;
    this.value = value;
    while (this.successCallback.length)
      this.successCallback.shift()(this.value);
  };

  reject = (reason) => {
    if (this.status !== PENDING) return;
    this.status = REJECTED;
    this.reason = reason;
    while (this.failCallback.length) this.failCallback.shift()(this.reason);
  };

  then(successCallback, failCallback) {
    // then方法返回第一個promise對象
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        // x是上一個promise回調函數的返回結果
        // 判斷x是普通值還是promise實例
        // 如果是普通值，直接resolve
        // 如果是promise實例，待promise狀態變為fulfilled，調用resolve或者reject

        // 因為mew MyPromise需要執行完才能拿到promise2，所以通過異步拿到
        setTimeout(() => {
          let x = successCallback(this.value);
          resolvePromise(promise2, x, resolve, reject);
        }, 0);
      } else if (this.status === REJECTED) {
        failCallback(this.reason);
      } else {
        this.successCallback.push(successCallback);
        this.failCallback.push(failCallback);
      }
    });
    return promise2;
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // 如果等于了，說明返回了自身，報錯
  if (promise2 === x) {
    return reject(
      new TypeError('Chaining cycle detected for promise #<Promise>')
    );
  }
  // 判斷x是不是其實例對象
  if (x instanceof MyPromise) {
    x.then(
      (value) => resolve(value),
      (reason) => reject(reason)
    );
  } else {
    // 普通值
    resolve(x);
  }
}

5）捕獲錯誤及優化

捕獲執行器中的錯誤

constructor(exector) {
    // 捕獲錯誤，如果有錯誤就執行reject
    try {
      exector(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }

驗證：

let promise = new MyPromise((resolve, reject) => {
    // resolve('success')
    throw new Error('執行器錯誤')
})
promise.then(value => {
  console.log(1)
  console.log('resolve', value)
}, reason => {
  console.log(2)
  console.log(reason.message)
})
//2
//執行器錯誤

then執行的時候報錯捕獲

then(successCallback, failCallback) {
    // then方法返回第一個promise對象
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        failCallback(this.reason);
      } else {
        this.successCallback.push(successCallback);
        this.failCallback.push(failCallback);
      }
    });
    return promise2;
  }

驗證：

let promise = new MyPromise((resolve, reject) => {
  resolve('success');
});
// 第一個then方法中的錯誤要在第二個then方法中捕獲到
promise
  .then(
    (value) => {
      console.log('1', value);
      throw new Error('then error');
    },
    (reason) => {
      console.log('2', reason.message);
    }
  )
  .then(
    (value) => {
      console.log('3', value);
    },
    (reason) => {
      console.log('4', reason.message);
    }
  );
// 1 success
// 4 then error

錯誤后的鏈式調用

then(successCallback, failCallback) {
    // then方法返回第一個promise對象
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else {
        this.successCallback.push(successCallback);
        this.failCallback.push(failCallback);
      }
    });
    return promise2;
  }

驗證：

let promise = new MyPromise((resolve, reject) => {
  throw new Error('執行器錯誤');
});

// 第一個then方法中的錯誤要在第二個then方法中捕獲到
promise
  .then(
    (value) => {
      console.log('1', value);
      throw new Error('then error');
    },
    (reason) => {
      console.log('2', reason.message);
      return 200;
    }
  )
  .then(
    (value) => {
      console.log('3', value);
    },
    (reason) => {
      console.log('4', reason.message);
    }
  );
// 2 執行器錯誤
// 3 200

異步狀態下鏈式調用（then方法優化）

   ...
  resolve = (value) => {
   ...
    // 調用時，不再需要傳值，因為在push回調數組時，已經處理了
    while (this.successCallback.length) this.successCallback.shift()();
  };
  reject = (reason) => {
    ...
    // 調用時，不再需要傳值，因為在push回調數組時，已經處理了
    while (this.failCallback.length) this.failCallback.shift()();
  };

  then(successCallback, failCallback) {
    // then方法返回第一個promise對象
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        ...
      } else if (this.status === REJECTED) {
        ...
      } else {
        // 處理異步情況
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            // 如果回調中報錯的話就執行reject
            try {
              let x = failCallback(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    return promise2;
  }

驗證：

let promise = new MyPromise((resolve, reject) => {
  setTimeout(() => {
    resolve('成功');
  }, 2000);
});
// 第一個then方法中的錯誤要在第二個then方法中捕獲到
promise
  .then(
    (value) => {
      console.log('1', value);
      return 'hello';
    },
    (reason) => {
      console.log('2', reason.message);
      return 200;
    }
  )
  .then(
    (value) => {
      console.log('3', value);
    },
    (reason) => {
      console.log('4', reason.message);
    }
  );
// 1 成功
// 3 hello

6）把then方法的參數變成可選參數

var promise = new Promise((resolve, reject) => {
      resolve(100)
    })
    promise
      .then()
      .then()
      .then()
      .then(value => console.log(value))
// 在控制臺最后一個then中輸出了100

// 這個相當于
promise
  .then(value => value)
  .then(value => value)
  .then(value => value)
  .then(value => console.log(value))

所以修改then方法：

 then(successCallback, failCallback) {
    // 先判斷回調函數是否傳了,如果沒預留就默認一個函數，把參數返回
    successCallback = successCallback ? successCallback : (value) => value;
    failCallback = failCallback  ? failCallback : (reason) => {  throw reason };
    ...
  }

7）實現Promise.all

promise.all方法是解決異步并發問題的

// 如果p1是兩秒之后執行的，p2是立即執行的，那么根據正常的是p2在p1的前面。
// 如果我們在all中指定了執行順序，那么會根據我們傳遞的順序進行執行。
function p1 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1')
    }, 2000)
  })
}
function p2 () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('p2')
    },0)
  })
}
Promise.all(['a', 'b', p1(), p2(), 'c']).then(result => {
  console.log(result)
  // ["a", "b", "p1", "p2", "c"]
})

分析：

all方法接收一個數組，數組中可以是普通值也可以是promise對象
數組中值得順序一定是我們得到的結果的順序
返回值也是一個promise對象，可以調用then方法
如果數組中所有值是成功的，那么then里面就是成功回調，如果有一個值是失敗的，那么then里面就是失敗的
使用all方法是用類直接調用，那么all一定是一個靜態方法

分析完，開整：

class MyPromise {
  ...
  static all(array) {
    // 結果數組
    let result = [];
    // 計數器
    let index = 0;
    return new MyPromise((resolve, reject) => {
      let addData = (key, value) => {
        result[key] = value;
        index++;
        // 當計數器等于參數數組的長度，說明所有參數已經執行完畢
        if (index === array.length) {
          resolve(result);
        }
      };
      // 對傳遞的數組中遍歷
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          current.then(
            (value) => addData(i, value),
            (reason) => reject(reason)
          );
        } else {
          addData(i, array[i]);
        }
      }
    });
  }
}

驗證：

function p1() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1');
    }, 2000);
  });
}

function p2() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p2');
    }, 0);
  });
}
Promise.all(['a', 'b', p1(), p2(), 'c']).then((result) => {
  console.log(result);
  // ["a", "b", "p1", "p2", "c"]
});

8）實現Promise.resolve

分析：

如果參數是一個promise對象，則直接返回；如果是一個值，則生成一個promise對象，把值進行返回
肯定是一個靜態方法

class MyPromise {
  ...
  // Promise.resolve方法
  static resolve(value) {
    if (value instanceof MyPromise) {
      return value;
    } else {
      return new MyPromise((resolve) => resolve(value));
    }
  }
}

驗證：

function p1() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1');
    }, 2000);
  });
}

Promise.resolve(100).then((value) => console.log(value));
Promise.resolve(p1()).then((value) => console.log(value));
// 100
// 2s 之后輸出 p1

8）實現finally方法

無論最終狀態是成功或是失敗，finally都會執行
可以在finally之后拿到then的結果
這是原型上的方法

  // finally
  // 使用then方法拿到promise的狀態，無論成功或失敗都返回callback
  // then方法返回的就是一個promise，拿到成功回調就把value return，錯誤回調就把錯誤信息return
  // 如果callback是一個異步promise，還需等待其執行完畢，所以要用到靜態方法resolve
  finally(callback) {
    return this.then(
      (value) => {
        return MyPromise.resolve(callback()).then(() => value);
      },
      (reason) => {
        return MyPromise.resolve(callback()).then(() => {
          throw reason;
        });
      }
    );
  }

驗證：

function p1() {
  return new MyPromise((resolve, reject) => {
    setTimeout(() => {
      resolve('p1');
    }, 2000);
  });
}
function p2() {
  return new MyPromise((resolve, reject) => {
    reject('p2 reject');
  });
}
p2()
  .finally(() => {
    console.log('finallyp2');
    return p1();
  })
  .then(
    (value) => {
      console.log('成功回調', value);
    },
    (reason) => {
      console.log('失敗回調', reason);
    }
  );
// finallyp2
// 兩秒之后執行p2 reject

9）實現catch方法

可以捕獲全局錯誤
也是原型對象的方法

 // 直接調用then方法，然后成功的地方傳遞undefined，錯誤的地方傳遞reason
  catch(failCallback) {
    return this.then(undefined, failCallback);
  }

Promise全部代碼

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';
class MyPromise {
  constructor(exector) {
    // 捕獲錯誤，如果有錯誤就執行reject
    try {
      exector(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }

  status = PENDING;
  value = undefined;
  reason = undefined;
  successCallback = [];
  failCallback = [];

  resolve = (value) => {
    if (this.status !== PENDING) return;
    this.status = FULFILLED;
    this.value = value;
    // 調用時，不再需要傳值，因為在push回調數組時，已經處理了
    while (this.successCallback.length) this.successCallback.shift()();
  };

  reject = (reason) => {
    if (this.status !== PENDING) return;
    this.status = REJECTED;
    this.reason = reason;
    // 調用時，不再需要傳值，因為在push回調數組時，已經處理了
    while (this.failCallback.length) this.failCallback.shift()();
  };

  then(successCallback, failCallback) {
    // 先判斷回調函數是否傳了,如果沒預留就默認一個函數，把參數返回
    successCallback = successCallback ? successCallback : (value) => value;
    failCallback = failCallback
      ? failCallback
      : (reason) => {
          throw reason;
        };
    // then方法返回第一個promise對象
    let promise2 = new MyPromise((resolve, reject) => {
      if (this.status === FULFILLED) {
        // x是上一個promise回調函數的返回結果
        // 判斷x是普通值還是promise實例
        // 如果是普通值，直接resolve
        // 如果是promise實例，待promise狀態變為fulfilled，調用resolve或者reject

        // 因為mew MyPromise需要執行完才能拿到promise2，所以通過異步拿到
        setTimeout(() => {
          try {
            let x = successCallback(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else if (this.status === REJECTED) {
        setTimeout(() => {
          try {
            let x = failCallback(this.reason);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      } else {
        // 處理異步情況
        this.successCallback.push(() => {
          setTimeout(() => {
            try {
              let x = successCallback(this.value);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
        this.failCallback.push(() => {
          setTimeout(() => {
            // 如果回調中報錯的話就執行reject
            try {
              let x = failCallback(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      }
    });
    return promise2;
  }

  static all(array) {
    // 結果數組
    let result = [];
    // 計數器
    let index = 0;
    return new MyPromise((resolve, reject) => {
      let addData = (key, value) => {
        result[key] = value;
        index++;
        // 當計數器等于參數數組的長度，說明所有參數已經執行完畢
        if (index === array.length) {
          resolve(result);
        }
      };

      // 對傳遞的數組中遍歷
      for (let i = 0; i < array.length; i++) {
        let current = array[i];
        if (current instanceof MyPromise) {
          current.then(
            (value) => addData(i, value),
            (reason) => reject(reason)
          );
        } else {
          addData(i, array[i]);
        }
      }
    });
  }
  // Promise.resolve方法
  static resolve(value) {
    if (value instanceof MyPromise) {
      return value;
    } else {
      return new MyPromise((resolve) => resolve(value));
    }
  }
  // finally
  // 使用then方法拿到promise的狀態，無論成功或失敗都返回callback
  // then方法返回的就是一個promise，拿到成功回調就把value return，錯誤回調就把錯誤信息return
  // 如果callback是一個異步promise，還需等待其執行完畢，所以要用到靜態方法resolve
  finally(callback) {
    return this.then(
      (value) => {
        return MyPromise.resolve(callback()).then(() => value);
      },
      (reason) => {
        return MyPromise.resolve(callback()).then(() => {
          throw reason;
        });
      }
    );
  }
  // catch
  // 直接調用then方法，然后成功的地方傳遞undefined，錯誤的地方傳遞reason
  catch(failCallback) {
    return this.then(undefined, failCallback);
  }
}

function resolvePromise(promise2, x, resolve, reject) {
  // 如果等于了，說明返回了自身，報錯
  if (promise2 === x) {
    return reject(
      new TypeError('Chaining cycle detected for promise #<Promise>')
    );
  }
  // 判斷x是不是其實例對象
  if (x instanceof MyPromise) {
    x.then(
      (value) => resolve(value),
      (reason) => reject(reason)
    );
  } else {
    // 普通值
    resolve(x);
  }
}

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Promise手寫

Promise手寫

1）核心邏輯實現

2）加入異步處理邏輯

3）then 方法多次調用

4）then 方法鏈式調用

5）捕獲錯誤及優化

6）把then方法的參數變成可選參數

7）實現Promise.all

8）實現Promise.resolve

8）實現finally方法

9）實現catch方法

Promise全部代碼

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Promise手寫

1）核心邏輯實現

2）加入異步處理邏輯

3）then 方法多次調用

4）then 方法鏈式調用

5）捕獲錯誤及優化

6）把then方法的參數變成可選參數

7）實現Promise.all

8）實現Promise.resolve

8）實現finally方法

9）實現catch方法

Promise全部代碼

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频