ES6 Promise详解

🚀 优质资源分享 🚀

前言

本文主要是对Promise本身的用法做一个全面解析而非它的原理实现，如果你对Promise的用法还不是很熟悉或者想加深你对Promise的理解，我相信这篇文章一定会帮到你。

首先让我们先了解一下JavaScript为什么会引入Promise

回调地狱

让我们先看这样一段代码，JQuery中ajax请求：

  $.ajax({
      url: "url1",
      data: {},
      success(res1) {
        //获取到第一个数据
        console.log(res1);
        //根据第一个数去去获取第二个数据
        $.ajax({
          url: "url2",
          data: {
            query: res1.xxx,
          },
          success(res2) {
            //获取到第二个数据
            console.log(res2);
            //根据第二个数去去获取第三个数据
            $.ajax({
              url: "url3",
              data: {
                query: res2.xxx,
              },
              success(res3) {
                //获取到第三个数据
                console.log(res3);
                //...
              },
            });
          },
        });
      },
      error(err) {
        console.log(err);
      },
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

我们会发现这些回调一层又一层，这就被称为回调地狱(callback hell)，尤其业务逻辑复杂的时候这些回调就会变得难以维护。于是Promise就出现了。我们再看一个使用promise封装的axios请求：

 axios
      .get(url1, {})
      .then((res1) => {
        //获取到第一个数据
        console.log(res1);
        //根据第一个数去去获取第二个数据
        return axios.get(url2, { query: res1.xxx });
      })
      .then((res2) => {
        //获取到第一个数据
        console.log(res2);
        //根据第二个数去去获取第三个数据
        return axios.get(url3, { query: res2.xxx });
      })
      .then((res3) => {
        //获取到第三个数据
        console.log(res3);
        //...
      })
      .catch((err) => {
        console.log(err);
      });


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

通过对比我们会发现Promise解决了传统的回调函数的回调地狱问题，使得业务逻辑显得更加清晰了。接下来我们就开始正式介绍Promise了。

概述

Promise是现代异步编程的基础,在Promise返回给我们的时候操作其实还没有完成，但Promise对象可以让我们操作最终完成时对其进行处理，无论成功还是失败。

Promise的返回有三种状态分别是等待（pending）， 成功（fulfilled），拒绝（rejected），我们看以下示例(后续我们将用延时器setTimeout来代表我们的异步操作）

 const promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(1);
      },1000);
    });
    console.lo
1
2
3
4
5