本文共 3542 字，大约阅读时间需要 11 分钟。

Promise构造函数是JavaScript中处理异步操作的一种强大工具，它允许我们在代码中明确地表示关于未来操作的状态。以下是对Promise及其相关方法的详细解析：

Promise构造函数

Promise 构造函数用于创建一个新的 Promise 对象。Promise 的核心是一个执行器函数（executor），它接收两个函数：resolve 和 reject。resolve 会在异步操作成功时被调用，reject 会在异步操作失败时被调用。这些函数的作用是将 Promise 的状态从 pending（未定）变为 fulfilled（完成）或 rejected（失败）。

构造一个 Promise 实例的代码示例：

new Promise((resolve, reject) => {  // 异步操作执行逻辑  resolve('成功的数据');  // 或者  // reject(new Error('失败的数据'));});

resolve 和 reject 函数会根据异步操作的结果分别将 Promise 的状态改为 fulfilled 或 rejected。需要注意的是，执行器函数在 Promise 构造时会立即执行，且 resolve 和 reject 的返回值会被忽略。

Promise.prototype.then()

then() 方法用于将当前 Promise 的结果传递给一个回调函数。它返回一个新的 Promise，并且可以传入两个参数：成功回调和失败回调。

例如：

var p1 = new Promise((resolve, reject) => {  resolve('成功！');  // 或者 reject(new Error('出错了！'));});p1.then(value => {  console.log(value); // '成功！'}, reason => {  console.error(reason); // '出错了！'});

then() 方法返回的 Promise 的状态取决于传入的回调函数的返回值：

• 如果回调函数返回一个值，新的 Promise 成功，值作为参数传递。
• 如果没有返回值，参数为 undefined。
• 如果抛出错误，新的 Promise 失败，错误作为参数传递。
• 如果返回另一个 Promise，新的 Promise 的状态与该 Promise 的状态相同。

Promise.prototype.catch()

catch() 方法用于处理 Promise 失败的情况。它等价于调用 then(undefined, onRejected)，将失败原因传递给回调函数。

例如：

var p1 = new Promise((resolve, reject) => {  resolve('Success');});p1.then(value => {  console.log(value); // 'Success'  throw 'oh, no!';}).catch(e => {  console.log(e); // 'oh, no!'});

catch() 无法捕获在异步操作中抛出的错误，特别是如果在 resolve() 之后抛出错误，catch() 也无法处理。

Promise.prototype.resolve()

resolve() 方法用于将一个值或另一个 Promise 转换为成功状态的 Promise。它会等待传入的 Promise 完成，并将结果传递给回调函数。

例如：

Promise.resolve('Success').then(value => {  console.log(value); // 'Success'});Promise.resolve([1, 2, 3]).then(v => {  console.log(v[0]); // 1});

resolve() 也会将数组或其他数据结构传递给回调函数。

Promise.prototype.reject()

reject() 方法用于创建一个失败状态的 Promise，传入的原因会在 catch() 中被捕获。

例如：

Promise.reject('Testing static reject').then(value => {}, reason => {  console.log(reason); // 'Testing static reject'});

Promise.prototype.all()

all() 方法用于同时处理多个 Promise。它返回一个新的 Promise，只有当所有传入的 Promise 都成功时，新的 Promise 才成功；否则，新的 Promise 失败。

例如：

var p1 = Promise.resolve(3);var p2 = 1337;var p3 = new Promise(resolve => {  setTimeout(resolve, 100, 'foo');});Promise.all([p1, p2, p3]).then(values => {  console.log(values); // [3, 1337, 'foo']});

如果其中一个 Promise 失败，新的 Promise 也会失败。

Promise.prototype.race()

race() 方法返回一个 Promise，一旦迭代器中的某个 Promise 解决或拒绝，返回的 Promise 就会以该结果作为最终结果。

例如：

var promise1 = new Promise(resolve => {  setTimeout(resolve, 500, 'one');});var promise2 = new Promise(resolve => {  setTimeout(resolve, 100, 'two');});Promise.race([promise1, promise2]).then(value => {  console.log(value); // 'two'（因为 `promise2` 更快）});

Promise在Ajax操作中的应用

Promise 被广泛用于处理 Ajax 请求。通过创建一个 Promise，我们可以等待请求完成，并在成功或失败时分别处理结果。

例如：

const getJSON = function(url) {  const promise = new Promise((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(json => {  console.log('Contents: ' + json);}, error => {  console.error('出错了', error);});

通过 Promise，我们可以简化 Ajax 请求的回调处理，使代码更加简洁和易读。

总结

Promise 构造函数及其方法为JavaScript代码带来了异步操作的处理，简化了回调地狱问题，使代码更加简洁易读。通过合理使用 then(), catch(), resolve(), reject(), all(), race() 等方法，我们可以高效地处理异步操作，提升代码的质量和可维护性。

转载地址：http://zhko.baihongyu.com/