ES6 如何处理异步请求-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步请求是非常常见的操作，例如 AJAX 请求和 Promise。在 ES6 中，新增了一些处理异步请求的语法糖和方法，让我们更加方便地处理异步请求。

Promise

Promise 是 ES6 新增的一个异步编程解决方案，它可以更加方便地处理异步请求。

Promise 的基本用法

Promise 有三种状态：pending（等待中）、fulfilled（已成功）和 rejected（已失败）。当 Promise 的状态变为 fulfilled 或 rejected 时，Promise 的状态就不会再改变。

创建 Promise 对象的方法如下：

const promise = new Promise((resolve, reject) => {
  // 异步请求
  if (/* 请求成功 */) {
    resolve('请求成功');
  } else {
    reject('请求失败');
  }
});

在 Promise 对象中，resolve 和 reject 是两个函数，分别代表 Promise 成功和失败的状态。在异步请求成功时，调用 resolve 函数，将请求结果作为参数传递给 resolve 函数；在异步请求失败时，调用 reject 函数，将错误信息作为参数传递给 reject 函数。

使用 Promise 对象的 then 方法处理 Promise 成功和失败的状态，then 方法有两个参数，分别代表 Promise 成功和失败时的回调函数。

promise.then(
  (result) => {
    console.log(result); // 请求成功
  },
  (error) => {
    console.log(error); // 请求失败
  }
);

Promise 的链式调用

Promise 的 then 方法返回的是一个新的 Promise 对象，可以通过链式调用 then 方法实现多个异步请求的顺序执行。

// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
  // 异步请求1
  resolve(1);
});

const promise2 = new Promise((resolve, reject) => {
  // 异步请求2
  resolve(2);
});

promise1
  .then((result) => {
    console.log(result); // 1
    return promise2;
  })
  .then((result) => {
    console.log(result); // 2
  });

在上面的示例中，通过 promise1 的 then 方法返回 promise2 对象，实现了两个异步请求的顺序执行。

Promise 的错误处理

在异步请求失败时，可以通过 Promise 的 catch 方法处理错误信息。

const promise = new Promise((resolve, reject) => {
  // 异步请求
  reject('请求失败');
});

promise.catch((error) => {
  console.log(error); // 请求失败
});

Promise.all 和 Promise.race

Promise.all 方法可以同时执行多个异步请求，并在所有请求完成后返回所有请求结果的数组；Promise.race 方法可以同时执行多个异步请求，并返回最先完成的请求结果。

// javascriptcn.com 代码示例
const promise1 = new Promise((resolve, reject) => {
  // 异步请求1
  resolve(1);
});

const promise2 = new Promise((resolve, reject) => {
  // 异步请求2
  resolve(2);
});

Promise.all([promise1, promise2]).then((results) => {
  console.log(results); // [1, 2]
});

Promise.race([promise1, promise2]).then((result) => {
  console.log(result); // 1
});

async/await

async/await 是 ES8 新增的异步编程解决方案，它基于 Promise 实现，可以更加方便地处理异步请求。

async/await 的基本用法

async/await 是通过 async 和 await 关键字实现的，async 函数返回一个 Promise 对象，await 关键字可以暂停异步请求的执行，等待异步请求完成后再继续执行。

// javascriptcn.com 代码示例
async function request() {
  const result = await new Promise((resolve, reject) => {
    // 异步请求
    resolve('请求成功');
  });
  console.log(result); // 请求成功
}

request();

在上面的示例中，async 函数返回一个 Promise 对象，await 关键字等待异步请求完成后，将请求结果赋值给 result 变量。

async/await 的错误处理

在异步请求失败时，可以通过 try/catch 语句处理错误信息。

// javascriptcn.com 代码示例
async function request() {
  try {
    const result = await new Promise((resolve, reject) => {
      // 异步请求
      reject('请求失败');
    });
    console.log(result);
  } catch (error) {
    console.log(error); // 请求失败
  }
}

request();

async/await 的链式调用

与 Promise 类似，async/await 也可以通过链式调用实现多个异步请求的顺序执行。

// javascriptcn.com 代码示例
async function request() {
  const result1 = await new Promise((resolve, reject) => {
    // 异步请求1
    resolve(1);
  });
  const result2 = await new Promise((resolve, reject) => {
    // 异步请求2
    resolve(2);
  });
  console.log(result1, result2); // 1 2
}

request();

async/await 和 Promise 的区别

async/await 和 Promise 都是异步编程解决方案，它们的区别如下：

async/await 使异步代码看起来像同步代码，更加易读易懂；
async/await 可以通过 try/catch 语句处理错误信息，而 Promise 只能通过 catch 方法处理错误信息；
async/await 可以通过链式调用实现多个异步请求的顺序执行，而 Promise 需要通过 then 方法实现。

总结

ES6 提供了 Promise 和 ES8 提供了 async/await，它们都是处理异步请求的优秀解决方案。在实际开发中，我们可以根据具体情况选择适合自己的方案，提高代码的可读性和可维护性。

示例代码：https://codepen.io/miraclew/pen/MWJWdVj

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