ES6 Promise对象

Posted 2020-10-02

ES6 Promise对象

ES6 规定 Promise对象是一个构造函数，用来生成 Promise实列, 如下代码：

var promise = new Promise((resolve, reject) => {
  if (true) {
    resolve(value);
  } else {
    reject(error);
  }
});

resolve 函数的作用是，将promise对象的状态从 "未完成"（Pending） 变为 “成功”(Resolved), 在异步操作成功调用时，并将异步操作的结果，作为参数传递出去。
reject函数的作用是，将promise对象的状态 从 "未完成"(Pending) 变为 "失败"（Rejected）, 在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise实列生成以后，可以使用then方法分别指定 Resolved状态 和 （Rejected）状态的回调函数。

下面是一个Promise对象的简单列子：

function timeout (ms) {
  return new Promise ((resolve, reject) => {
    setTimeout(resolve, ms, ‘done‘);
  });
}

timeout(100).then((value) => {
  console.log(value); // done
})

如上代码，timeout函数返回一个Promise对象的实例，过了指定的时间以后，Promise的实例状态变为Resolved，然后触发then指定的回调。参数值就是实例状态变为Resolved传进来的 done，因此输出done。

Promise新建后就会立即执行，如下代码：

const promise = new Promise((resolve, reject) => {
  console.log(‘Promise‘);
  resolve();
});
promise.then(()=> {
  console.log(‘Resilved‘);
});
console.log(‘Hi‘);

输出结果是 Promise  Hi  Resilved done

Promise新建后立即执行，所以首先输出的是 Promise， 然后promise对象resolve方法是异步的，所以先执行完所有同步的方法才会执行resolve中的方法， 因此输出HI，
最后输出 Resilved, 最后100ms后，又执行timeout方法，最后输出 done

下面是一个用Promise对象实现的 Ajax 操作的例子。

如下代码：

var getJSON = function(url) {
  var promise = new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open(‘GET‘, url);
    xhr.onreadystatechange = handler;
    xhr.responseType = ‘json‘;
    xhr.setRequestHeader(‘Accept‘, ‘application/json‘);
    xhr.send();
    function handler() {
      if (this.readyState !== 4) {
        return;
      }
      if (this.status === 200) {
        resolve(this.response);
      } else {
        reject(new Error(this.statusText));
      }
    }
  });
  return promise;
};

var url = ‘http://httpbin.org/get‘;
getJSON(url).then((json) => {
  console.log(json); // 返回json对象
}, (error)=> {
  console.log(error);
});

上面调用resolve函数和reject函数都带有参数，他们的参数会传递给回调函数，reject函数的参数一般是Error对象的实列，表示抛出的错误，resolve函数的参数一般是正常的值，当然还有可能是promise对象的实列。

1-2 理解 Promise.prototype.then()

Promise实例具有then方法，该作用是为Promise实例添加状态改变时的回调函数。该方法的第一个参数是Resolved状态的回调函数，第二个参数是Rejected状态的回调函数。
then方法返回的是一个新的Promise实例。因此我们可以采用链式的写法，即then方法后面再调用另一个then方法。如下代码：

getJSON(url).then((json)=>{
  console.log(2);
  console.log(json); // 返回json对象
  return json;
}).then((data) => {
  console.log(1);
  console.log(data); // 返回和上面一样的json对象
});

上面的代码使用then方法，使用了2个回调函数，第一个回调函数完成以后，将返回的结果作为参数，传入第二个回调函数。

1-3 理解 Promise.prototype.catch()

Promise.prototype.catch方法是 .then(null, rejection)的别名，用于指定发生错误时的回调函数。如下代码：

getJSON(url).then((json)=> {
  // ...
}).catch((error) => {
  console.log(‘发生错误‘);
});

上面代码中，getJSON方法返回一个Promise对象，如果该对象状态变为Resolved, 则会调用then方法的回调函数，如果异步操作抛出错误，状态就会变为 Rejected，就会调用catch方法的回调函数，来处理这个错误。如下是一个发生错误的demo.

var promise2 = new Promise((resolve, reject) => {
  throw new Error(‘test‘);
});
promise2.catch((error)=> {
  console.log(error);
});
// 其实上面的代码和下面的代码是等价的
// 写法一
var p3 = new Promise((resolve, reject) => {
  try {
    throw new Error(‘test‘)
  } catch (e) {
    reject(e);
  }
});
p3.catch((error) => {
  console.log(error);
});

// 写法二
var p4 = new Promise((resolve, reject) => {
  reject(new Error(‘test‘));
});
p4.catch((error) => {
  console.log(error);
});

但是如果Promise状态已经变成 Resolved的话，再抛出错误是没有用的了。如下代码

var p5 = new Promise((resolve, reject) => {
  resolve(‘ok‘);
  throws new Error(‘test‘); // 这句无效
});

p5.then((value) => {
  console.log(value);
}).catch((error)=> {
  console.log(error);
})

上面代码中，在resolve后面再抛出错误是不会被扑获到的，因为Promise的状态一旦改变，就永久保持该状态。
Promise对象的错误具有传递性质，它会一直往下传递，直到被catch捕获到为止。

注意： 一般来讲，不要在then方法里面定义Reject状态的回调函数(then的第二个参数)，总是使用catch语句。比如如下代码：

// bad的写法
  var p6 = new Promise((resolve, reject) => {
    
  });
  p6.then((data) => {
    // success
  }, (error)=>{
    // error
  });

  // good的写法
  p6.then((data) => {
    // success
  }).catch((error) => {
    // error
  });

上面的代码中，第二种写法比第一种写法好，第二种写法可以捕获到前面then方法执行中的错误。因此我们建议使用catch方法，而不使用then方法的第二个参数。

1-4 理解Promise.all()方法

Promise.all方法用于将多个Promise实例，包装成一个新的Promise实例。如下代码：
var P = Promise.all([p1, p2, p3]);
该方法接收一个数组作为参数，p1, p2, p3都是Promise的实列，如果他们不是实列的话，会先调用 Promise.resolve方法，将参数转为Promise实例。
当p1, p2, p3的状态都变成 fulfilled的时候，p的状态才会变成成功状态。当他们之中有一个是 rejected的话，那么p的状态就变为失败的状态。
注意点： 如果作为参数的Promise实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。如下代码：

const p11 = new Promise((resolve, reject) => {
   resolve(‘hello‘);
 }).then(res => res).catch(e => e);
 const p22 = new Promise((resolve, reject) => {
   throw new Error(‘报错了‘);
 }).then(res => res).catch(e=>e);

 Promise.all([p1, p2]).then(res => console.log(res)).catch(e=>console.log(e));

上面代码中， p11会 resolved， p22首先会rejected，但是p22有自己的catch方法，该方法会返回一个新的Promise的实例，执行完catch方法后，也会变成resolved，导致promise.all方法参数里面的两个实例都会resolved，因此会调用then方法指定的回调函数，不会调用catch方法指定的回调函数。
1-5 理解Promise.race()方法

该方法同样是将多个Promise的实例，包装成一个新的Promise实例。
var p = Promise.race([p1, p2, p3]);
Promise.race 与 Promise.all的相同点：如果不是Promise的实例，就会先调用 Promise.resolve方法，将参数转为Promise的实例。
不同点是： 只要p1, p2, p3 其中任何一个实例先改变状态，那么P的状态就会跟着改变。也就是说那个先改变Promise实例的返回值，就传递给P的回调函数。

1-6 理解Promise.resolve()方法

该方法的作用是：可以将现有的对象转为Promise对象。比如如下代码：
var jsPromise = Promise.resolve({"a":1});
其实上面的代码等价与下面的代码：
new Promise(resolve => resolve({"a": 1}));

1-7 理解 Promise.reject()方法

Promise.reject()方法返回一个新的Promise实例，该实例的状态为 rejected。

var p33 = Promise.reject(‘出错了‘);
 p33.then(null, (s) => {
   console.log(s); // 出错了
 });

上面代码生成一个Promise对象的实例p33，状态为rejected，回调函数会立即执行。