用原生JS编写ES6的Promise对象，躲避“回调地狱”

2023-12-19 09:19:49

大家好，今天我们来聊聊ES6中的Promise对象。Promise对象是一种异步编程的解决方案，它可以帮助我们避免“回调地狱”问题。在本文中，我们将使用原生JS来实现ES6的Promise对象，并通过一个简单的异步请求示例来说明如何使用Promise对象。

首先，我们来了解一下什么是“回调地狱”。“回调地狱”是指在异步编程中，当我们使用回调函数来处理异步操作时，会导致代码层层嵌套，难以维护。例如，以下代码展示了如何使用回调函数来实现一个简单的异步请求：

function makeRequest(callback) {
  // 模拟一个异步请求
  setTimeout(() => {
    const data = { name: 'John Doe' };
    callback(data);
  }, 1000);
}

makeRequest(function(data) {
  console.log(data.name); // John Doe
});

在这个例子中，我们使用makeRequest函数来模拟一个异步请求。该函数接受一个回调函数作为参数，当异步请求完成时，就会调用这个回调函数并传入请求结果。

现在，让我们来看看如何使用Promise对象来实现同样的异步请求：

function makeRequest() {
  // 模拟一个异步请求
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: 'John Doe' };
      resolve(data);
    }, 1000);
  });
}

makeRequest()
  .then(data => {
    console.log(data.name); // John Doe
  });

在这个例子中，我们使用makeRequest函数来创建一个Promise对象。Promise对象有一个then方法，它接受一个回调函数作为参数。当Promise对象的状态变为resolved时，就会调用这个回调函数并传入Promise对象的结果。

Promise对象有三种状态：pending、resolved和rejected。当Promise对象刚创建时，它的状态为pending。当异步操作完成时，Promise对象的状态会变为resolved或rejected，具体取决于异步操作是否成功。

使用Promise对象可以避免“回调地狱”问题，使代码更加简洁易读。例如，以下代码展示了如何使用Promise对象来实现多个异步请求：

const request1 = makeRequest();
const request2 = makeRequest();

Promise.all([request1, request2])
  .then(data => {
    console.log(data); // [{ name: 'John Doe' }, { name: 'Jane Doe' }]
  });