JS解决回调地狱为什么需要Promise来优化异步编程

更新时间：2023年10月16日 10:50:43 作者：Qing

这篇文章主要为大家介绍了JS解决回调地狱为什么需要Promise来优化异步编程原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

为什么需要Promise？

JavaScript在执行异步操作时，我们并不知道什么时候完成，但是我们又需要在这个异步任务完成后执行一系列动作，传统的做法就是使用回调函数来实现，下面举个常见的例子。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function loadImage(imgUrl, callback) {
      const img = document.createElement("img");
      img.onload = function () {
        callback(this);
      };
      img.src = imgUrl;
    }

    loadImage(
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg",
      (img) => document.body.appendChild(img)
    );
  </script>
</html>

上面这个例子会在图片加载完成后将图片放置在body元素下，随后在页面上也会展示出来。
但是如果我们需要在加载完这张图片后再加载其它的图片呢，只能在回调函数里面再次调用loadImage

loadImage(
  "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg",
  (img) => {
    document.body.appendChild(img);
    loadImage(
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg",
      (img) => {
        document.body.appendChild(img);
      }
    );
  }
);

继续增加一张图片呢？

loadImage(
  "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg",
  (img) => {
    document.body.appendChild(img);
    loadImage(
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg",
      (img) => {
        document.body.appendChild(img);
        loadImage(
          "https://travel.12306.cn/imgs/resources/uploadfiles/images/6d77d0ea-53d0-4518-b7e9-e53795b4920c_product_W572_H370.jpg",
          (img) => {
            document.body.appendChild(img);
          }
        );
      }
    );
  }
);

如果按照上述的方式再增加图片，我们就需要在每层的回调函数里面调用loadImage，就形成了所谓的回调地狱。

Promise

定义

Promise是一种解决异步编程的方案，它比传统的异步解决方案更加直观和靠谱。

状态

Promise对象总共有三种状态

pending：执行中，Promise创建后的初始状态。
fulfilled：执行成功，异步操作成功取得预期结果后的状态。
rejected：执行失败，异步操作失败未取得预期结果后的状态。

创建方法

const promise = new Promise((resolve, reject) => {})

Promise构造函数接收一个函数，这个函数可以被称为执行器，这个函数接收两个函数作为参数，当执行器有了结果后，会调用两个函数之一。

resolve：在函数执行成功时调用，并且把执行器获取到的结果当成实参传递给它，调用形式如resolve(获取到的结果)
reject：函数执行失败时调用，并且把具体的失败原因传递给它，调用形式如reject(失败原因)

注意：resolve和reject两个回调函数在Promise类内部已经定义好函数体，如果想了解实现的可以在网上搜索Promise的源码实现。

const promise = new Promise((resolve, reject) => {
  /* 做一些需要时间的事，之后调用可能会resolve 也可能会reject */
  setTimeout(() => {
    const random = Math.random()
    console.log(random)
    if (random > 0.5) {
      resolve('success')
    } else {
      reject('fail')
    }

  }, 500)
})

console.log(promise)

在浏览器控制执行上面这段代码

可以看到刚开始promise的状态是pending状态，500ms后promise的状态转变为rejected。

状态转换

当执行器获取到结果后，并且调用resolve或者reject两个函数中的一个，整个promise对象的状态就会发生变化。

这个状态的转换过程是不可逆的，一旦发生转换，状态就不会再发生变化了。

实例方法

promise对象里面有两个函数用来消费执行器产生的结果，分别是then和catch，而finally则用来执行清理工作。

then

then这个函数接收两个函数作为参数，当执行器传递的结果状态是fulfilled，第一个函数参数会接收到执行器传递过来的结果当做参数，并且执行；当执行器传递的结果状态为rejected，那么作为第二个函数参数会收到执行器传递过来的结果当做参数，并且执行。

const promise = new Promise((resolve, reject) => {
  /* 做一些需要时间的事，之后调用可能会resolve 也可能会reject */
  setTimeout(() => {
    const random = Math.random();
    if (random > 0.5) {
      resolve("success");
    } else {
      reject("fail");
    }
  }, 500);
});
console.log(promise);
promise.then(
  (res) => console.log("resolved: ", res),  // 生成的随机数大于0.5，则会执行这个函数
  (err) => console.error("rejected: ", err)  // 生成的随机数小于0.5，则会执行这个函数
);

可以尝试多次执行上面这段代码，注意控制台打印信息，看是否符合上面的结论。

如果我们只对成功的情况感兴趣，那么我们可以只为then函数提供一个函数参数。

const promise = new Promise((resolve) => setTimeout(() => resolve("done"), 1000))

promise.then(console.log) // 1秒后打印done

如果我们只对错误的情况感兴趣，那么我们可以为then的第一个参数提供null，在第二个参数提供具体的函数

const promise = new Promise((resolve, reject) =>
  setTimeout(() => reject("fail"), 1000)
);

promise.then(null, console.log); // 1秒后打印fail

catch

catch这个函数接收一个函数作为参数，当执行器传递的结果状态为rejected，函数才会被调用。

const promise = new Promise((reject) => setTimeout(() => reject("fail"), 500)).catch(
  console.log
)

promise.catch(console.log)

可能有同学会发现，传递给catch的参数好像和传递给then的第二个参数长得一模一样，两种方式有什么差异吗？
答案是没有，then(null, errorHandler)和catch(errorHandler)这两种用法都能达到一样的效果，都能消费执行器执行失败时传递的原因。

finally

常规的try-catch语句有finally语句，在promise中也有finally，它接收一个函数作为参数，无论执行器得到的结果状态是fulfilled还是rejected，这个函数参数是一定会被执行的。
finally的目的是用来执行清理动作的，例如请求已经完成，停止显示loading图标。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const random = Math.random();
    if (random > 0.5) {
      resolve("success");
    } else {
      reject("fail");
    }
  }, 500);
});

promise
  .finally((res) => {
    console.log("======res======", res); // 打印undefined
    console.log("task is done, do something");
  })
  .then(console.log, console.error); // 打印success或者fail

通过打印结果可以确定两点

传递给finally的函数也不会接收到执行器处理后的结果。
finally函数不参与对执行器产生结果的消费，将执行器产生的结果传递给后续的程序去进行消费。

手动实现下finally函数，对上面说到的这两个点就会非常清晰

Promise.prototype._finally = function (callback) {
  return this.then(
    (res) => {
      callback();
      return res;
    },
    (err) => {
      callback();
      throw err;
    }
  );
};

链式调用

前面介绍的then、catch以及finally函数在调用后都会返回promise对象，进而可以再次调用then、catch以及finally，这样就可以进行链式调用了。

const promise = new Promise((resolve) => {
  setTimeout(() => resolve(1), 1000);
});

promise
  .then((res) => {
    console.log(res); // 1
    return res * 2;
  })
  .then((res) => {
    console.log(res); // 2
    return res * 2;
  })
  .then((res) => {
    console.log(res); // 4
    return res * 2;
  })
  .then((res) => {
    console.log(res); // 8
  });

我们用链式调用的方式来优化先前加载图片的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function loadImage(imgUrl) {
      return new Promise((resolve) => {
        const img = document.createElement("img");
        img.onload = function () {
          resolve(this);
        };
        img.src = imgUrl;
      });
    }

    loadImage(
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg"
    )
      .then((img) => {
        document.body.appendChild(img);
        return loadImage(
          "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg"
        );
      })
      .then((img) => {
        document.body.appendChild(img);
        return loadImage(
          "https://travel.12306.cn/imgs/resources/uploadfiles/images/6d77d0ea-53d0-4518-b7e9-e53795b4920c_product_W572_H370.jpg"
        );
      })
      .then((img) => {
        document.body.appendChild(img);
      });
  </script>
</html>

注意：刚刚接触promise的同学不要犯下面这种错误，下面这种代码也是回调地狱的例子。

loadImage(
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg"
    ).then((img) => {
      document.body.appendChild(img);
      loadImage(
        "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg"
      ).then((img) => {
        document.body.appendChild(img);
        loadImage(
          "https://travel.12306.cn/imgs/resources/uploadfiles/images/6d77d0ea-53d0-4518-b7e9-e53795b4920c_product_W572_H370.jpg"
        ).then((img) => {
          document.body.appendChild(img);
        });
      });
    });

静态方法

Promise.resolve

用来生成状态为fulfilled的promise对象，使用方式如下

const promise = Promise.resolve(1) // 生成值为1的promise对象

代码实现如下

Promise.resolve2 = function (value) {
  return new Promise((resolve) => {
    resolve(value);
  });
};

Promise.reject

用来生成状态为rejected的promise对象，使用方式如下

const promise = Promise.reject('fail')) // 错误原因为fail的promise对象

代码实现如下

Promise.reject2 = function(value) {
  return new Promise((_, reject) => {
    reject(value)
  })
}

Promise.race

接收一个可迭代的对象，并将最先执行完成的promise对象返回。

const promise = Promise.race([
  new Promise((resolve, reject) => setTimeout(() => reject(1), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(2), 1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
])

promise.then(console.log) // 打印2

代码实现

Promise.race2 = function (promises) {
  return new Promise((resolve, reject) => {
    if (!promises[Symbol.iterator]) {
      reject(new Error(`${typeof promises} ${promises} is not iterable`));
    }
    for (const promise of promises) {
      Promise.resolve(promise).then(resolve, reject);
    }
  });
};

Promise.all

假设我们希望并行执行多个promise对象，并等待所有的promise都执行成功。
接收一个可迭代对象(通常是promise数组)，当迭代对象里面每个值都被resolve时，会返回一个新的promise，并将结果数组进行返回。当迭代对象里面有任意一个值被reject时，直接返回新的promise，其状态为rejected。

const promise = Promise.all([
  new Promise((resolve, reject) => setTimeout(() => reject(1), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(2), 1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
])

promise.then(console.log, co sole.error) // console.error打印1

这里需要注意一个点，结果数组的顺序和源promise的顺序是一致的，即使前面的promise耗费时间最长，其结果也会放置在结果数组第一个。

const promise = Promise.all([
  new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(2), 1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000))
])

promise.then(console.log) // 打印结果[1, 2, 3]

我们针对图片加载的例子使用Promise.all来实现。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    function loadImage(imgUrl) {
      return new Promise((resolve) => {
        const img = document.createElement("img");
        img.onload = function () {
          resolve(this);
        };
        img.src = imgUrl;
      });
    }
    const imgUrlList = [
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg",
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9a7-f780-4e71-b719-9300109a9ff2_product_W572_H370.jpg",
      "https://travel.12306.cn/imgs/resources/uploadfiles/images/6d77d0ea-53d0-4518-b7e9-e53795b4920c_product_W572_H370.jpg",
    ];
    const promiseList = imgUrlList.map((item) => loadImage(item));
    const promise = Promise.all(promiseList).then((imglist) => {
      imglist.forEach((item) => document.body.appendChild(item));
    });
  </script>
</html>

代码实现

Promise.all2 = function (promises) {
  return new Promise((resolve, reject) => {
    if (!promises[Symbol.iterator]) {
      reject(new Error(`${typeof promises} ${promises} is not iterable`));
    }
    const len = promises.length;
    const result = new Array(len);
    let count = 0;
    if (!len) {
      resolve(result);
      return;
    }
    for (let i = 0; i < promises.length; i++) {
      Promise.resolve(promises[i]).then(
        (res) => {
          count++;
          result[i] = res;  // 保证结果数组的放置顺序
          if (count === len) {
            resolve(result);
          }
        },
        (err) => {
          reject(err);
        }
      );
    }
  });
};

Promise.allSettled

前面提到的Promise.all遇到任意一个promise reject，那么Promise.all会直接返回一个rejected的promise对象。而Promise.allSetled只需要等待迭代对象内所有的值都完成了状态的转变，无论迭代对象里面的值是被resolve还是reject，那么就会返回一个状态为fulfilled的promise对象，并以包含对象数组的形式返回结果。

const promise = Promise.allSettled([
  new Promise((resolve, reject) => setTimeout(() => reject(1), 2000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(2), 1000)),
  new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)),
]);

promise.then(console.log, console.error); 

// 打印结果

// [
//   { status: 'rejected', reason: 1 },
//   { status: 'fulfilled', value: 2 },
//   { status: 'fulfilled', value: 3 }
// ]

代码实现

Promise.allSettled2 = function (promises) {
  const resolveHandler = (res) => ({ status: "fulfilled", value: res });
  const rejectHandler = (err) => ({ status: "rejected", reason: err });
  return Promise.all(
    promises.map((item) => item.then(resolveHandler, rejectHandler))
  );
};

使用场景

大多数异步任务场景都可以使用promise，例如网络请求、文件操作、数据库操作等。当然不是所有的异步任务场景都适合使用promise，例如在事件驱动的编程模型中，使用时间监听器和触发器来处理异步操作更加自然和直观。

在JavaScript中，async和await提供基于promise更高级的异步编程方式，其使用方式看起来就像同步操作一样，更加直观。在使用promise的同时，可以配合async和await体验更好的异步编程。

一个小问题

我们前面在讲catch的时候说到了，catch(errorHandler)其实就是then(null, errorHandler)的简写，那么下面两种写法会有区别吗？

// 写法1
promise.then(resolveHandler, rejectHandler)

// 写法2
promise.then(resolveHandler).catch(rejectHandler)

答案是不一样，假如在resolveHandler里面抛出错误，写法1最终会获得一个rejected的promise，而写法二由于后续有catch方法，所以即使f1里面有抛出异常，也能得到处理。

以上就是JS解决回调地狱为什么需要Promise来优化异步编程的详细内容，更多关于JS Promise异步编程的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

ES6知识点整理之函数对象参数默认值及其解构应用示例
这篇文章主要介绍了ES6知识点整理之函数对象参数默认值及其解构应用,结合实例形式分析了ES6函数对象参数相关使用技巧,需要的朋友可以参考下
2019-04-04
JS小功能（button选择颜色)简单实例
这篇文章主要介绍了button选择颜色简单实例，有需要的朋友可以参考一下
2013-11-11
js canvas实现擦除效果示例代码
擦除效果在我们日常开发中也是时有见到的，通过擦除效果大大加强了与用户的交互性，所以下面这篇文章主要给大家介绍了利用js和canvas实现擦除效果的相关资料，文中给出了详细的介绍和示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-04-04
JS原生手写轮播图效果
这篇文章主要为大家详细介绍了JS原生手写轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
这篇文章主要介绍了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果,涉及javascript鼠标事件及页面元素遍历调用的实现技巧,非常简单实用,需要的朋友可以参考下
2015-08-08
浅谈JavaScript的闭包函数
闭包是有权访问另一个函数作用域中的变量的函数。首先要明白的就是，闭包是函数。由于要求它可以访问另一个函数的作用于中的变量，所以我们往往是在一个函数的内部创建另一个函数，而“另一个函数”就是闭包。本文对其进行系统分析，需要的朋友可以看下
2016-12-12
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
JavaScript 兼容IE、FireFox、Chrome等浏览器的xml处理函数（xml同步/异步加载、xsl转换、selectSingleNode、selectNodes）
2011-11-11
JS提交form表单实例分析
这篇文章主要介绍了JS提交form表单的方法,结合实例形式简单分析了页面加载时提交表单及通过链接提交表单的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-12-12
js模拟select下拉菜单控件的代码
js模拟select下拉菜单控件的代码，需要的朋友可以参考一下
2013-05-05
JavaScript中instanceof与typeof运算符的用法及区别详细解析
这篇文章主要是对JavaScript中instanceof与typeof运算符的用法及区别进行了详细的分析介绍。需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11