JavaScript深入理解-Promise以及常用方法详解

Promise

Promise 介绍

Promise 对象表示一个异步操作的最终完成（或失败）及其结果值。

状态：

一个 promise 必然处于以下几种状态之一

• 待定：初始状态(pending)
• 已兑现：操作成功完成(fulfilled)
• 已拒绝：操作失败(reject)

创建 Promise

Promise 对象是由关键字 new 及其构造函数来创建的。该构造函数会把一个叫做“处理器函数”（executor function）的函数作为它的参数。这个“处理器函数”接受两个函数——resolve 和 reject ——作为其参数。当异步任务顺利完成且返回结果值时，会调用 resolve 函数；而当异步任务失败且返回失败原因（通常是一个错误对象）时，会调用 reject 函数。

new Promise((resolve, reject) => {
   
  //处理操作  返回resolve或者reject
  if (flag) resolve(data);
  eles(reject(data));
});

需要某个自定义的函数，变成 Promise 只需返回一个 Promise 即可

function myFun(flag) {
   
  return new Promise((resolve, reject) => {
   
    //处理操作  返回resolve或者reject
    if (flag) resolve(data);
    eles(reject(errorData));
  });
}

在具体项目中，使用 Promise 封装获取当前配置方法。

/**
 * 获取字典列表
 * axios : axios
 * lang : 当前传入语言 ，根据不同语言，获取配置不同
 *
 * 判断sessionStorage里是否获取到当前所需要字典配置。
 * 如果有返回该配置，获取不到再从接口中获取数据，并保存到sessionStorage。
 */
function getDictionary(axios, lang) {
   
  // 查看sessionStorage
  const dic = sessionStorage.getItem("dictionary_data_" + lang) || null;
  // 返回一个Promise对象
  return new Promise((resolve, reject) => {
   
    if (dic) resolve(JSON.parse(dic));
    else {
   
      axios
        .get(`/api/dictionary?language=${
     lang}`)
        .then((res) => {
   
          const dic_data = {
   };
          if (res.data.code === 0 && res.data.result) {
   
            res.data.result.forEach((r) => (dic_data[r.itemName] = r));
            //存放sessionStorage
            sessionStorage.setItem(
              "dictionary_data_" + lang,
              JSON.stringify(dic_data)
            );
            // 返回数据
            resolve(dic_data);
          } else reject();
        })
        .catch((error) => reject());
    }
  });
}

静态方法

Primise.all(iterable)

传参需要是一个可迭代对象
Promise.all 返回一个 Promise 对象。
该 Promise 对象会在 Promise.all 的 iterable 参数对象里的所有 Promise 对象都成功才会触发。

简单来说就是只有 Promise.all 参数里的所有 Promise 成功才会触发，有一个失败就不会触发。

例如：

var promise1 = Promise.resolve("heihei");
var promise2 = "wenbo";
var promise3 = new Promise((resolve, reject) => {
   
  setTimeout(() => {
   
    resolve([1, 2, 3]);
  }, 2000);
});

Promise.all([promise1, promise2, promise3]).then((res) => {
   
  console.log(res);
});

上面代码 会在大约两秒之后 打印输出 [ 'heihei', 'wenbo', [ 1, 2, 3 ] ]
因为 Promise.all 需要等待 promise3 中的 setTimeout 完成后才会触发返回 Promise 对象

又例如：

var pro