大白话讲解JavaScript的Promise

在编写 JavaScript 程序时，经常需要处理异步操作，异步操作并不会在当前代码执行完成后立即返回结果。这时候 Promise 成为了我们处理异步操作的不二选择。

什么是Promise

Promise 是一种异步编程的解决方案，通过 Promise 可以更加优雅地组织和处理异步操作。它通过简单的方式来管理复杂的回调地狱，使得异步操作的处理更加可读和可维护。

Promise 的使用

Promise 有 3 种状态：

• pending：初始状态，既不是成功，也不是失败状态。
• fulfilled：表示成功状态，此时Promise有一个返回值，可以在then中进行获取。
• rejected：表示失败状态，此时Promise有一个返回值，可以在catch中进行获取。

创建一个 Promise

创建一个 Promise 通过 Promise 构造函数来进行，如下：

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

Promise 构造函数接收一个函数作为参数，函数接收两个参数，分别为 resolve 和 reject。

• resolve：表示异步操作成功并返回结果。
• reject：表示异步操作失败并返回错误信息。

异步操作的处理

在 Promise 中，通过调用 resolve 或 reject 来返回异步操作的结果和错误信息。

const promise = new Promise((resolve, reject) => {
  // 异步操作
  const flag = true;
  if (flag) {
    resolve('success');
  } else {
    reject('error');
  }
});

Promise 的使用

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

Promise 实例有一个 then 方法用来处理异步操作成功的返回结果，并且还有一个 catch 方法用来处理异步操作失败的返回结果。

示例1：通过 Promise 获取豆瓣电影 Top250 数据

const fetchData = url => {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
           resolve(xhr.responseText);
        } else {
          reject(xhr.statusText);
        }
      }
    };
    xhr.send();
  });
};

fetchData('https://douban.com/top250')
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.log(error);
  });

示例2：Promise 的链式调用

const doSomething = () => {
  return new Promise((resolve, reject) => {
    const flag = true;
    if (flag) {
      resolve('result1');
    } else {
      reject('error');
    }
  });
};

const doSomethingElse = result => {
  return new Promise((resolve, reject) => {
    const flag = true;
    if (flag) {
      resolve(`${result}-result2`);
    } else {
      reject('error');
    }
  });
};

doSomething()
  .then(result1 => {
    return doSomethingElse(result1);
  })
  .then(result2 => {
    console.log(result2);
  })
  .catch(error => {
    console.log(error);
  });

总结

通过 Promise 可以更好地管理和组织复杂的异步操作，使得我们编写的异步操作代码更加优雅和可读。在实际应用中，Promise 的应用场景非常广泛，非常值得我们深入学习和掌握。