Promiseを理解する

3559 ワード

javascript

promise規範原理と実現
三つの状態

ペンディング準備

fulfilled成功

レジェクト失敗

二つの過程
(不可逆)

pending->fulfilled

pending->reject

一つの方法

then他はすべてthenの派生方法です.
Promiseデータ構造


{
  [[PromiseState]]: "fulfilled",  //     
  [[PromiseResult]]: 1 //     
}

Promise Demo運行説明

const p = new Promise(function (resolve, reject) {
  console.log(0);
  setTimeout(() => {
    const number = parseInt(Math.random() * 100);
    const isOdd = number % 2;
    if (isOdd) {
      resolve(number);
    } else {
      reject(0);
    }
  }, 2000);
});

console.log(1);

p.then((data) => {
  console.log(2);
}).catch((err) => {
  console.log(3);
});

console.log(4);

new Promiseは同期実行

に属する.

setTimeoutは、非同期スレッド

を開く.

順序0 1 4

Promiseのパラメータは、

を実行する関数である.

Promiseのパラメータ関数のパラメータは、reolve rejectも関数です.

レスリング作用

promise定義で呼び出し、着信成功結果

PromiseStateの状態を変更すると、fulfilled

となります.

PromiseResoult値

を設定します.

リジェクトの役割

promise定義で呼び出し、着信失敗の原因

PromiseStateの状態を変更すると、reject

となります.

PromiseResoult値

を設定します.

then方法

は、傍受関数をキュー

に追加する.

は、新たなプロモーション

を返します.
プロミスの本質
生産者の消費パターンは、new promiseとthenの生産リフォームで消費を提供し、then catch finally;チェーン式の呼び出し方式を達成し、リベート地獄の目的を改善する.
簡単に実現する

const PROMISE_STATE_ENUM = {
  PEDDING: "pendding",
  FULFILLED: "fulfilled", //   
  REJECTED: "rejected", //   
};

class MyPromise {
  callbacks = []; //   ？  ？     ？       promise.All

  constructor(fn) {
    this.state = PROMISE_STATE_ENUM.PEDDING;
    this.result = void 0;
    // console.log("    ");

    fn(
      function resolve(data) {
        if (this.state === PROMISE_STATE_ENUM.PEDDING) {
          this.state = PROMISE_STATE_ENUM.FULFILLED;
          this.result = data;
          this.callbacks.map((fn) => {
            fn(this.result);
          });
        }
      }.bind(this),
      function reject() {
        this.state = PROMISE_STATE_ENUM.REJECTED;
        return this;
      }.bind(this)
    );
  }

  then(onFulfilled, onRejected) {
    const self = this;
    let promise2;

    if (this.state === PROMISE_STATE_ENUM.PEDDING) {
      promise2 = new MyPromise(function (resolve, reject) {
        self.callbacks.push(() => {
          // setTimeout(function () {
            let x = onFulfilled(self.result);
            resolve(x);
          // });
        });
      });
    }

    if (this.state === PROMISE_STATE_ENUM.FULFILLED) {
      console.log("getdata");
      onFulfilled(this.result);
    }

    if (this.state === PROMISE_STATE_ENUM.REJECTED) {
      onRejected(this.result);
    }

    return promise2;
  }

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

  finally() {}

  static all() {}

  static race() {}
  static allSettled() {}
  static any() {}
  static resolve(a) {
    return a;
  }
  static reject() {}
}

const p = new MyPromise(function (resolve, reject) {
  setTimeout(() => {
    if (1) {
      resolve("should data 123");
    } else {
      reject("error");
    }
  }, 300);
});

// console.dir(MyPromise);
// console.log(p, "p");

const p1 = p.then(
  (resolve) => {
    // console.log(resolve, ": then 1");
    return 555
  },
  (error) => {
    console.log(error);
  }
);
// console.log(p1, "p1");

p1.then((data) => {
  // console.log(data, ": then 2");
});

// console.log(p, "p2");

HTML_箇条書きの使用画像