Promise的api使用方法-白红宇

Promise的api使用方法

阅读量：284 次

发布时间：2019-03-01

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

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/

你可能感兴趣的文章