ES6 Promise 对象

在 MDN 中对 Promise 的定义是：Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。

Promise 对象存在以下三种状态：

• pending： 初始状态；
• fulfilled：成功状态；
• rejected：失败状态；

Promise 对象的初始状态是 pending，最终状态是 fulfilled 或者 rejected，其中 fulfilled 表示成功状态，rejected 表示失败状态。状态只能够由 pending 变成 fulfilled 或 rejected，当 Promise 对象的状态改变后就不可以再改变了。

Promise 状态改变

Promise 简单的使用方式如下

let pro = new Promise((resolve, reject) => {
  // 执行异步操作代码
  // 异步操作成功，则 resolve(value)
  // 异步操作失败，则 reject(error)
});

从上面的使用方式来看，我们可以知道 Promise 是一个构造函数，其参数接受一个匿名函数，该匿名函数有两个参数，分别是 resolve 和 reject 函数。

通过 new Promise 得到一个 Promise 对象，Promise 构造函数所接受的匿名函数会直接执行，一般是在里面执行异步操作。

当异步操作成功的时候，执行 resolve 函数，会把 Promise 对象的状态由 pending 变为 fulfilled；当异步操作失败的时候，执行 reject 函数，会把 Promise 对象的状态由 pending 变为 rejected。其中 resolve 和 reject 函数都分别传入了返回值（value）和错误值（error），这两个值将会作为 Promise 对象 then 方法的两个回调函数的实参。

Promise 对象上具有很多方法，其方法是挂载在对应的原型即 Promise.prototype 上面的，下面就 Promise 对象的方法做一个详细的介绍。

Promise.prototype.then(onFulfilled, onRejected)

当 Promise 对象的状态由 pending 变为 fulfilled 或 rejected 的时候，会触发 Promise 对象的 then 方法。

pro.then((value) => {
  // fulfilled
}, (error) => {
  // rejected
});

then 方法接受两个回调函数作为参数，当 Promise 对象当状态由 pending 变为 fulfilled 的时候，执行第一个回调函数；当 Promise 对象当状态由 pending 变为 rejected 的时候，执行第二个回调函数（可选）。这两个回调函数的参数分别是执行 resolve 和 reject 函数时传入的值。

举个简单的例子

let timeoutPro = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'resolve');
});
timeoutPro.then((value) => {
  console.log(value);
});

我们还可以将其封装起来

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'resolve');
  });
}
timeout(1000).then((value) => {
  console.log(value);
});

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

let get = function (url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.responseType = "json";
    xhr.setRequestHeader("Accept", "application/json");
    xhr.send();
    xhr.onreadystatechange = () => {
      if (xhr.readyState != 4) return;
      if (xhr.status == 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
  });
};
get("0010.json").then((res) => {
  console.log(res.name);  // ttsy
}, (error) => {
  console.log(error);
});

注：这里 0010.json 为一个与存放上述代码的脚本文件同目录的一个 json 文件，里面的内容如下

{
  "name":"ttsy",
  "age":25
}

then 方法返回的是一个新的 Promise 对象。因此可以采用链式写法，即 then 方法后面再调用另一个 then 方法。而下一个 then 方法的行为跟前一个 then 方法的返回值有关。

• 如果上一个 then 中的回调函数返回一个值，那么该 then 返回的 Promise 对象将会成为 fulfilled 状态，并且上一个 then 的回调函数返回的值将作为下一个 then 的回调函数的参数值；
• 如果上一个 then 中的回调函数抛出一个错误，那么该 then 返回的 Promise 对象将会成为 rejected 状态，并且上一个 then 的回调函数抛出的错误将作为下一个 then 的回调函数的参数值；
• 如果上一个 then 中的回调函数返回一个 Promise 对象，那么下一个 then 则会根据返回的 Promise 对象的状态变化来执行。

举个例子～

当上一个 then 中的回调函数返回一个值时

timeout(1000).then((value) => {
  return value;
}).then((value) => {
  console.log(value);  // resolve
})

当上一个 then 中的回调函数抛出一个错误时

timeout(1000).then((value) => {
  throw 'error'
}).then((value) => {
  console.log(value);
}, (error) => {
  console.log(error)  // error
})

当上一个 then 中的回调函数返回一个 Promise 对象时

timeout(1000).then((value) => {
  return timeout(1000);
}).then((value) => {
  console.log(value);  // resolve
}, (error) => {
  console.log(error)
})

一般来讲，在 then 中的回调函数返回一个 Promise 对象的场景都是 http 请求的嵌套，上述例子只是为了更方便的表示这种情况，实际场景中并不会去这么使用。

上面说的是下一个 then 方法的行为跟前一个 then 方法的返回值有关，但如果一开始创建的 Promise 对象的状态由 pending 变为 rejected 时，又是怎样的情况呢？

function timeoutReject(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(reject, ms, 'reject');
  });
}
timeoutReject(1000).then((value) => {
  console.log(value);
}).then(undefined, (error) => {
  console.log(error)  // error
})

可以看到， Promise 对象的状态变为失败状态时执行第二个 then 中的第二个回调函数的代码。实际上，Promise 对象的错误具有「冒泡」性质，会一直向后传递，直到被捕获为止。

Promise.prototype.catch(onRejected)

Promise.prototype.catch(onRejected) 与 Promise.prototype.then(undefined, onRejected) 是一样的效果，用于指定发生错误时的回调函数。同样的，catch 也返回一个新的 Promise 对象。

timeoutReject(1000).then((value) => {
  console.log(value);
}).catch((error) => {
  console.log(error)  // error
})

而在上面说到，Promise 对象的错误具有「冒泡」性质，会一直向后传递，直到被捕获为止。所以当前面的 Promise 对象抛出错误时，则会依次冒泡，直到被 catch 捕获。

timeoutReject(1000).then((value) => {
  console.log(value);
}).then((value) => {
  console.log(value);
}).catch((error) => {
  console.log(error)  // error
})

上述代码中，catch 会捕获 timeoutReject() 和两个 then 所返回的 Promise 对象所抛出的错误。

一般来说，不要在 then 方法里面定义 Reject 状态的回调函数（即 then 的第二个参数），总是使用 catch 方法。

Promise.all()

Promise.all 方法用于将多个 Promise 对象合成一个 Promise 对象，它接受一个数组作为参数，数组中的每一个元素都是 Promise 对象。最终返回一个新的 Promise 对象，其状态由传入的 Promise 对象共同决定，分为以下两种情况。

• 当传入的 Promise 对象的状态都变成 fulfilled 时，返回的新的 Promise 对象的状态才会变成 fulfilled，其 then 方法的回调函数的参数是一个数组，分别是传入的 Promise 对象的返回值；
• 当传入的 Promise 对象的状态其中有一个变成 rejected 时，返回的新的 Promise 对象的状态就会变成 rejected，其 then 方法的回调函数的参数是第一个状态变成 reject 的 Promise 对象的返回值。

传入的 Promise 对象的状态都变成 fulfilled 时

function timeout1(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'resolve');
  });
}
function timeout2(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'resolve');
  });
}
Promise.all([timeout1(1000), timeout2(2000)]).then((value) => {
  console.log(value); // [ 'resolve', 'resolve' ]
}).catch((error) => {
  console.log(error)  
})

当传入的 Promise 对象的状态其中有一个变成 rejected 时

function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'resolve');
  });
}
function timeoutReject(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(reject, ms, 'reject');
  });
}
Promise.all([timeout(1000), timeoutReject(2000)]).then((value) => {
  console.log(value); 
}).catch((error) => {
  console.log(error)  // reject
})