es6 promise对象常用案例

桃扇骨 2022-05-25 01:52 217阅读 0赞

**ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。**

//创造一个Promise实例
    const promise = new Promise(function(resolve, reject) {
      // ... some code
    
      if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。  
![这里写图片描述][70]  
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) { 
      // success
    }, function(error) { 
      // failure
    });

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

**异步加载图片的例子**

**用Promise对象实现的 Ajax 操作**

p1是一个 Promise，3 秒之后变为rejected。p2的状态在 1 秒之后改变，resolve方法返回的是p1。由于p2返回的是另一个 Promise，导致p2自己的状态无效了，由p1的状态决定p2的状态。所以，后面的then语句都变成针对后者（p1）。又过了 2 秒，p1变为rejected，导致触发catch方法指定的回调函数。

const p1 = new Promise(function (resolve, reject) {
      setTimeout(() => reject('我先'), 3000) }) const p2 = new Promise(function (resolve, reject) { setTimeout(() => resolve(p1), 1000) }) p2.then(result => console.log('result',result),reject=>console.log('reject',reject)) .catch(error => console.log('error',error))

结果是：reject 我先

$.ajax({
        url: '......',
        success: function (data) { 
            $.ajax({
                // 要在第一个请求成功后才可以执行下一步
                url: '......',
                success: function (data) { 
                     // ......
                }
            });
        }
    });

promise能很好地解决上面这种层层回调的情况。

不过它还是有兼容问题的  
![这里写图片描述][70 1]

[70]: /images/20220525/e992afebc29b4ae7af00b34ceda90942.png
[70 1]: /images/20220525/68b5a5797d9b43fd81067407daafd86f.png