JavaScript 异步编程那些事儿（上）：ES6 中 Promise 的应用方法-JavaScript中文网-JavaScript教程资源分享门户

JavaScript 是一门单线程语言，它的执行顺序是按照代码的书写顺序依次执行。当 JavaScript 遇到耗时的操作，比如网络请求或者文件读取，它会在这个操作结束后再执行下一步代码。这种行为被称为异步编程，因为它不像同步编程那样会阻塞代码的执行。

在 JavaScript 中，异步编程有多种实现方式，其中最流行的方式是使用回调函数。然而，回调地狱的问题也在随之而来。为了解决这个问题，ES6 引入了 Promise。

Promise 简介

Promise 是一个异步操作的容器，它代表一个异步操作最终完成或者失败，并返回结果或错误信息。

Promise 有三种状态：

pending（进行中）：初始状态，可以转换为下面两种状态之一；
fulfilled（已完成）：操作成功完成，可以获取到结果；
rejected（已失败）：操作失败，可以获取到错误信息。

Promise 对象具有以下特点：

状态不可逆：一旦状态被改变，就不会再变成其他状态；
可链式调用：一般一个异步操作会返回一个 Promise 对象，可以通过链式调用多个异步操作；
可以通过 then 方法获取结果或错误信息。

Promise 的基本用法

下面是一个使用 Promise 的例子：

function fetchData() {
  return new Promise(function(resolve, reject) {
    // 模拟一个异步操作
    setTimeout(function() {
      resolve('data');
    }, 1000);
  });
}

fetchData()
  .then(function(result) {
    console.log(result); // 'data'
  })
  .catch(function(error) {
    console.error(error);
  });

这个例子中，使用 Promise 包装了一个异步操作，并通过 then 方法获取了异步操作的结果。如果异步操作失败，则会通过 catch 方法获取错误信息。

Promise 的应用

Promise 可以应用在很多场景中，比如：

1. 多个异步操作的顺序执行

function fetchData1() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(1);
    }, 1000);
  });
}

function fetchData2() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(2);
    }, 2000);
  });
}

fetchData1()
  .then(function(result) {
    console.log(result); // 1
    return fetchData2();
  })
  .then(function(result) {
    console.log(result); // 2
  })
  .catch(function(error) {
    console.error(error);
  });

这个例子中，fetchData1 和 fetchData2 是两个异步操作。我们希望 fetchData1 执行完后再执行 fetchData2。

2. 多个异步操作的并行执行

function fetchData1() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(1);
    }, 1000);
  });
}

function fetchData2() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(2);
    }, 2000);
  });
}

Promise.all([fetchData1(), fetchData2()])
  .then(function(results) {
    console.log(results); // [1, 2]
  })
  .catch(function(error) {
    console.error(error);
  });

这个例子中，fetchData1 和 fetchData2 是两个异步操作。我们希望同时执行这两个异步操作，并在它们都执行完后获取它们的结果。

3. 异步操作的错误处理

function fetchData() {
  return new Promise(function(resolve, reject) {
    // 异步操作失败
    reject(new Error('fetchData error'));
  });
}

fetchData()
  .then(function(result) {
    console.log(result);
  })
  .catch(function(error) {
    console.error(error); // Error: fetchData error
  });

这个例子中，fetchData 是一个异步操作，并在操作失败时返回错误信息。我们需要在异步操作失败时通过 catch 方法获取错误信息。

总结

Promise 是 JavaScript 异步编程的一种解决方案，它的特点是状态不可逆、可链式调用、可以通过 then 方法获取结果或错误信息。Promise 可以应用在多个场景中，比如异步操作的顺序执行、多个异步操作的并行执行和异步操作的错误处理。掌握 Promise 的应用方法，可以帮助我们更好地理解并发处理和异步操作的具体实现方式。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65914d3eeb4cecbf2d67f710

JavaScript 异步编程那些事儿（上）：ES6 中 Promise 的应用方法