Promise的基本使用

Promise

1. Promise实例对象

• 用法1 调用 resolve 方法，返回一个成功的 promise 对象

const p1 = new Promise((resolve, reject) => {
  resolve("hello");
});

p1.then(
  (res) => {
    console.log(res); // hello
  },
  (err) => {
    console.log(err);
  }
);

• 用法2 调用 reject 方法，返回一个失败的 promise 对象

const p2 = new Promise((resolve, reject) => {
  reject("err");
});

// 捕获 reject 返回的值。1. 在then的第二个回调函数中获取。
p2.then(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err); // err
  }
);

// 捕获 reject 返回的值。2. 在链式结构最后加上 catch 方法。
p2.then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err); // err
});

• 用法3 then 方法返回 promise 对象，可以无限调用 then 方法

const p3 = new Promise((resolve, reject) => {
  resolve("第一个值");
});

p3.then((res) => {
  // 返回一个 promise 对象
  return new Promise((resolve, reject) => {
    console.log(res);   // 第一个值
    resolve("第二个值");
  });
}).then((res) => {
  console.log(res); // 第二个值
  // 这里返回 promise 对象，则可以无限调用 then 方法
});

Promise.resolve()

1. 直接返回一个 成功的 promise 对象

// 这里返回一个成功的promise对象，所以只会走 then 方法的第一个回调函数
const p4 = Promise.resolve("success");
p4.then(res => {
  console.log(res);  // success
}, err => {
  console.log(err);
})

Promise.reject();

1. 返回一个失败的 promise 对象

// 这里返回一个的promise对象，所以只会走 then 方法的第二个回调函数
const p4 = Promise.resolve("error");
p4.then(res => {
  console.log(res);
}, err => {
  console.log(err);  // error
})

Promise.all([p1, p2, p3])

1. Promise.all 传入 一个包含 promise 对象的数组，只有全部返回成功，则结果返回一个成功的数组。否则只要有一个失败，则返回失败的 promise 对象的值。

const p5 = new Promise((resolve, reject) => {
  resolve("hello1");
});
const p6 = Promise.resolve("hello2");

const result = Promise.all([p5, p6]);
console.log(result); // 返回 一个 成功 promiseResult 数组

const p9 = Promise.reject("error"); // 这里一定返回一个失败的promise对象
const result = Promise.all([p5, p6, p9]);  // 只要有一个失败就返回一个失败的 promise 对象
console.log(result); // 返回结果为一个失败的 promise 对象值

Promise.race([p1, p2, p3])

1. 根据第一个 promise 返回结果来确认promise对象值。

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功")
  }, 2000);
});

const p2 = Promise.reject("失败");

// 由于 p1 延迟2s触发，所以 p2 先执行返回了一个失败的结果，所以 result 就是一个 失败的 promise 对象
const result = Promise.race([p1, p2]);

手写promise方法（简单版）

function Promise(executor) {
  // 添加属性
  this.PromiseState = "pending";
  this.PromiseResult = null;
  this.callback = {};

  const self = this;

  // resolve
  function resolve(data) {
    if (self.PromiseState !== "pending") return;
    // 1.修改对象的状态 （promiseState)
    self.PromiseState = "fulfilled";

    // 2.设置对象结果值（promiseResult)
    self.PromiseResult = data;
    // 执行回调
    if (self.callback.onResolved) {
      self.callback.onResolved(data);
    }
  }

  // reject
  function reject(data) {
    if (self.PromiseState !== "pending") return;
    // 1.修改对象的状态 （promiseState)
    self.PromiseState = "rejected";

    // 2.设置对象结果值（promiseResult)
    self.PromiseResult = data;

    // 执行回调
    if (self.callback.onRejected) {
      self.callback.onRejected(data);
    }
  }

  try {
    // 同步调用执行器函数
    executor(resolve, reject);
  } catch (e) {
    // 修改 promise 对象的状态为失败
    reject(e);
  }
}

Promise.prototype.then = function (onResolved, onRejected) {
  if (this.PromiseState == "fulfilled") {
    onResolved(this.PromiseResult);
  }

  if (this.PromiseState == "rejected") {
    onRejected(this.PromiseResult);
  }

  // 保存回调函数
  if (this.PromiseState == "pending") {
    this.callback.push({ onResolved, onRejected });
  }
};