ES6 的 Promise 与异步编程-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，异步编程是非常常见的，因为有些操作需要等待一段时间才能完成，例如网络请求、文件读写等等。在 ES6 中，引入了 Promise 对象，可以更加方便地进行异步编程。

Promise 的基本使用

Promise 对象表示一个异步操作的最终完成或失败，并返回一个结果。Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。使用 Promise 对象可以更加方便地处理异步操作的结果，避免了回调函数嵌套的问题。

下面是一个简单的 Promise 使用示例：

// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const result = Math.random();
    if (result > 0.5) {
      resolve(result);
    } else {
      reject(new Error('result is too small'));
    }
  }, 1000);
});

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

上面的代码中，我们创建了一个 Promise 对象，它会在 1 秒后返回一个随机数。如果随机数大于 0.5，那么 Promise 对象就会进入 fulfilled 状态，并返回随机数；否则就会进入 rejected 状态，并返回一个错误对象。我们可以使用 then 方法来处理 Promise 对象的成功状态，使用 catch 方法来处理 Promise 对象的失败状态。

Promise 的链式调用

Promise 对象支持链式调用，可以更加方便地进行多个异步操作。下面是一个 Promise 链式调用的示例：

// www.javascriptcn.com code example
function getJSON(url) {
  return fetch(url).then((response) => {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('network error');
    }
  });
}

getJSON('/api/data')
  .then((data) => {
    console.log('data is', data);
    return getJSON('/api/moredata');
  })
  .then((moredata) => {
    console.log('moredata is', moredata);
  })
  .catch((error) => {
    console.error('error is', error);
  });

上面的代码中，我们定义了一个 getJSON 函数，用于获取 JSON 数据。我们可以使用 fetch 方法来获取网络数据，并使用 then 方法来处理获取数据的结果。在链式调用中，每个 then 方法都会返回一个新的 Promise 对象，可以继续进行链式调用。

Promise 的并行执行

有时候我们需要同时进行多个异步操作，并在所有操作完成后进行处理。Promise.all 方法可以用于将多个 Promise 对象并行执行，并在所有操作完成后返回一个结果数组。

下面是一个 Promise.all 的示例：

// www.javascriptcn.com code example
const promises = [
  fetch('/api/data1'),
  fetch('/api/data2'),
  fetch('/api/data3')
];

Promise.all(promises)
  .then((results) => {
    console.log('results are', results);
  })
  .catch((error) => {
    console.error('error is', error);
  });

上面的代码中，我们定义了一个包含三个 Promise 对象的数组，用于获取三个不同的网络数据。使用 Promise.all 方法可以同时执行这三个异步操作，并在所有操作完成后返回一个结果数组。

Promise 的应用场景

Promise 对象可以应用于很多场景，例如网络请求、文件读写、动画效果等等。使用 Promise 对象可以更加方便地处理异步操作的结果，并避免了回调函数嵌套的问题。

下面是一个使用 Promise 对象实现动画效果的示例：

// www.javascriptcn.com code example
function animate(element, properties, duration) {
  const start = Date.now();
  return new Promise((resolve) => {
    function step() {
      const progress = Math.min(1, (Date.now() - start) / duration);
      for (const property in properties) {
        const value = properties[property];
        const currentValue = element.style[property];
        const nextValue = value * progress + (1 - progress) * currentValue;
        element.style[property] = nextValue + 'px';
      }
      if (progress < 1) {
        requestAnimationFrame(step);
      } else {
        resolve();
      }
    }
    requestAnimationFrame(step);
  });
}

const box = document.querySelector('.box');
animate(box, { left: 200, top: 200 }, 1000)
  .then(() => {
    console.log('animation finished');
  });

上面的代码中，我们定义了一个 animate 函数，用于实现动画效果。使用 Promise 对象可以更加方便地处理动画效果的完成事件，并避免了回调函数嵌套的问题。

结语

ES6 的 Promise 对象是一种非常方便的异步编程方式，可以更加方便地处理异步操作的结果，并避免了回调函数嵌套的问题。在实际开发中，我们可以根据具体场景选择合适的异步编程方式，提高代码的可读性和可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d4d291a941bf71349030e1

ES6 的 Promise 与异步编程

Promise 的基本使用

Promise 的链式调用

Promise 的并行执行

Promise 的应用场景

结语

接着读