异步之Promise使用及方法简单实现

Promise是一个老生常谈的问题，在此就再次学习并以记录；

Promise的作用

Promise是异步编程，它的出现是用来解决回调地狱(callback)，Promise对象用来封装一个异步操作并可以获取其结果；同时使我们的代码变得简单、易懂、易维护；使异步代码同步化；

Primse的三种状态

• pending：进行中，初始状态
• resolved：已成功（又称 Fulfilled）
• rejected：已失败

Promise的方法

• 通过console.dir(Promise)打印可以发现，Promise是一个构造函数；
• 原型对象有then、catch、finally等；
• 实例对象有reject、resolve、all、race等；
• .then有两个参数，第一个参数代表返回成功的回调，第二个参数代表返回失败,第二个参数类同于.catch
• .catch不但可以接收失败的回调，还可以接收代码运行错误，类似try catch 功能

Promise的使用

Promse使用演示

Promise的基本实现

Promise的基本实现 实现过程写的很详细，可直接参考

Promse.all()的实现

Promse.all()的实现演示

• Promise.all 方法接收一个 promise 数组，返回一个新 promise；
• 并发执行数组中的全部 promise；
• promise 数组各项结果均为resolved,Promise.all会为resolved状态;
• promise 数组有一项为rejected,则Promise.all会为rejected状态;
• Promise.all()其中一个reject后,其他的仍然还会执行；

const promiseAll = (arr) => {
  return new Promise((resolve, reject) => {
    let newArr = [];
    arr.forEach(item => {
      item
        .then((res) => {
          newArr.push(res);
          // 当新数组和参数条数一样，代表执行结束
          if (newArr.length === arr.length) {
            resolve(newArr);
          }
        })
        .catch((err) => {
          reject(err);
        });
    });
  });
};
promiseAll([Promise函数对象1, Promise对象2, Promise对象3])
  .then((res) => {
    console.log("模拟Promise.all().then===>", res);
  })
  .catch((rej) => {
    console.log("模拟Promise.all().catch===>", rej);
  });

Primse.race()的实现

Pormise.race()的实现演示

• Promise.race 方法接收一个 promise 数组, 返回一个新 promise;
• 并发执行数组中的全部 promise；
• 新的Promise,是 promise 数组执行速度最快的那项的结果。

const promiseRace = (arr) => {
  return new Promise((resolve, reject) => {
    let newArr = [];
    arr.forEach((item) => {
      item
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  });
};

promiseAll([Promise函数对象1, Promise对象2, Promise对象3])
  .then((res) => {
    console.log("模拟Promise.race().then===>", res);
  })
  .catch((rej) => {
    console.log("模拟Promise.rece().catch===>", rej);
  });

Promise.resolve() 和 Promise.reject()的实现

Promise.resolve和Promise.reject的实现演示

• Promise.resolve 用来生成一个 resolve 完成态的 promise;
• Promise.reject 用来生成一个 rejected 失败态的 promise 。

// 实现Promise.resolve
const promiseRes = (value) => {
  return new Promise((res, rej) => {
    res(value);
  });
};
// 实现Promise.reject
const promiseRej = (value) => {
  return new Promise((res, rej) => {
    rej(value);
  });
};

promiseRes("resolve")
  .then((res) => {
    console.log(`模拟Promise.resolve().then===>`, res);
  })
  .catch((rej) => {
    console.log(`模拟Promise.resolve().catch===>`, rej);
  });
promiseRej("reject")
  .then((res) => {
    console.log(`模拟Promise.reject().then===>`, res);
  })
  .catch((rej) => {
    console.log(`模拟Promise.reject().catch===>`, rej);
  });

---

参考博客： juejin.cn/post/684490…

---

综上是对Promise的再次学习，若有问题，欢迎指正。