反应承诺 - JavaScript

在 JavaScript 编程中，通常需要处理异步代码。异步操作是一种在代码执行期间等待一个操作完成的方式，这个操作可能需要一些时间才能完成，例如，从服务器获取数据或等待用户输入。

在过去，开发者通常使用回调函数来处理异步代码。但是，这种方式容易导致回调地狱和代码混乱。

为了解决这个问题，ES6 引入了 JavaScript Promise，它是一个用来处理异步代码的对象。

Promise 的概念

Promise 对象有三种状态：

• Pending：等待状态，即还未成功也还未失败。
• Fulfilled：成功状态，意味着操作已成功完成，并返回了期望的结果。
• Rejected：失败状态，意味着操作未成功，并返回了一个错误。

Promise 对象通常用于异步操作，例如从服务器获取数据。在 Promise 对象中使用.then() 方法访问成功状态和.catch() 方法访问失败状态。

创建 Promise 对象

可以通过 new Promise() 创建一个 Promise 对象。它需要一个函数作为参数，该函数的参数是 resolve 和 reject。

const promise = new Promise((resolve, reject) => {
  // 异步操作
});

在异步操作完成时，需要调用其中一个参数（resolve 或 reject）返回操作的结果。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (success) {
      resolve('操作成功');
    } else {
      reject('操作失败');
    }
  }, 1000);
});

处理 Promise 对象

通过.then() 方法处理 Promise 的成功状态：

promise.then((result) => {
  // 处理成功状态
}).catch((error) => {
  // 处理失败状态
});

例如：

promise.then((result) => {
  console.log(result);
}).catch((error) => {
  console.error(error);
});

异步操作函数的封装

如果需要执行多个异步操作，可以把它们封装在一个函数内，并返回 Promise 对象。

例如：

function getData(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(Error(xhr.statusText));
      }
    };
    xhr.onerror = () => {
      reject(Error('Network Error'));
    };
    xhr.send();
  });
}

Promise.all() 方法

使用 Promise.all() 方法可以同时等待多个 Promise 对象完成，并返回所有 Promise 对象的结果。

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// Output: [3, 42, "foo"]

Promise.race() 方法

使用 Promise.race() 方法可以等待一个 Promise 对象完成，无论是成功状态或失败状态。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value); // 输出 "two"
});

在上面的例子中，promise2 完成得更快，最终结果是 'two'。

通过 Promise 对象，开发者可以更轻松地编写异步代码，并更好地处理异步操作的结果。同时，Promise 对象也提高了代码的可读性和代码的可维护性。