ES6（5）— Promise

扫码关注公众号，获取更多内容

目录

一、什么是Promise

二、Promise示例

---

一、什么是Promise

Promise是异步编程的一个解决方案，从语法上来说，Promise是一个对象，从它可以获取异步操作的消息。

Promise的特点：

1、Promise异步操作有三种状态：pending（进行中），fulfilled（成功），rejected（失败），除了异步操作的结果，任何其他操作都无法改变这个状态。

2、Promise对象只有从pending变为fulfilled和pending变为rejected的状态改变。只要处于fulfilled和rejected，状态就不会再改变。

Promise的缺点：

1、无法取消，一旦新建就会立即执行，无法中途取消。

2、如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。

3、当处于pending状态时，无法得知目前进展到哪一个阶段（刚开始还是即将完成）。

二、Promise示例

1、基本用法

通过new Promise 生成一个promise实例，Promise构造函数接受一个函数作为参数，该函数的两个参数分别为 函数resolve（成功）和函数reject（失败）。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

2、.then()方法

Promise实例生成以后，可以使用then方法分别指定resolved状态和rejected状态的回调函数

（1）简单示例

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

（2）Promise对象实现Ajax操作示例

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

  });

  return promise;
};

getJSON("/posts.json").then(function(json) {
  console.log('Contents: ' + json);
}, function(error) {
  console.error('出错了', error);
});

（3）多个回调函数

then方法将返回一个resolved或rejected状态的promise对象用于链式调用，且Promise对象的值就是这个返回值。

const p = new Promise(function(resolve,reject){
  resolve(1);
}).then(function(value){ // 第一个then // 1
  console.log(value);
  return value * 2;
}).then(function(value){ // 第二个then // 2
  console.log(value);
}).then(function(value){ // 第三个then // undefined
  console.log(value);
  return Promise.resolve('resolve'); 
}).then(function(value){ // 第四个then // resolve
  console.log(value);
  return Promise.reject('reject'); 
}).then(function(value){ // 第五个then //reject:reject
  console.log('resolve:' + value);
}, function(err) {
  console.log('reject:' + err);
});

3、.catch()

.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。

基本用法

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

4、.finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});

5、.all()

Promise.all()方法将多个promise实例包装成一个新的Promise实例。多个实例中，只有都成功了，.all方法才会返回resolve，否则返回reject。

const p = Promise.all([p1, p2, p3]);

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 报错了