如何使用 Promise 和 SetTimeout 处理异步任务-JavaScript中文网-JavaScript教程资源分享门户

异步任务的定义和处理

在前端开发中，我们经常会遇到需要请求服务器或执行其他耗时操作的情况。这些任务都是异步的，因为它们不会立即返回结果，而是需要一段时间才能完成。为了避免阻塞主线程，我们需要将这些任务放在独立的线程中执行，以便主线程可以继续响应用户操作。

在 JavaScript 中，我们通常使用回调函数来处理异步任务。这种方法存在一些问题，例如嵌套回调导致代码难以读取和维护，回调地狱等。为了解决这些问题，ES6 引入了 Promise 对象和 async/await 关键字。

Promise 的用法

Promise 是一种表示异步操作结果的对象，其可以处于三种状态之一：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。Promise 对象的状态可以由异步操作的结果决定，如果操作成功，Promise 对象变为 fulfilled 状态，否则变为 rejected 状态。

Promise 对象有以下两个基本方法：

then 方法

then 方法用于指定 Promise 对象的状态改变时的回调函数。它接受两个函数作为参数，分别是当 Promise 对象从 pending 状态变为 fulfilled 状态时的回调函数和当 Promise 对象从 pending 状态变为 rejected 状态时的回调函数。

// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello, World!");
  }, 1000);
});

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

上面的代码创建了一个 Promise 对象，它在 1 秒后将状态从 pending 变为 fulfilled，并返回一个字符串，然后在 then 方法中打印这个字符串。

catch 方法

catch 方法用于指定 Promise 对象从 pending 状态变为 rejected 状态时的回调函数。它与 then 方法的第二个参数的作用相同，但更加简洁。

// www.javascriptcn.com code example
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error("Something went wrong!"));
  }, 1000);
});

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

上面的代码创建了一个 Promise 对象，它在 1 秒后将状态从 pending 变为 rejected，并返回一个 Error 对象，然后在 catch 方法中打印这个错误对象的消息属性。

Promise.all 方法

Promise.all 方法用于将多个 Promise 对象封装成一个新的 Promise 对象，当所有的 Promise 对象都变为 fulfilled 状态时，返回一个包含所有异步操作结果的数组。如果有一个 Promise 对象变为 rejected 状态，则返回第一个 rejected Promise 对象的错误信息。

// www.javascriptcn.com code example
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello");
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("World");
  }, 2000);
});

Promise.all([promise1, promise2]).then((results) => {
  console.log(results.join(", "));
});

上面的代码创建了两个 Promise 对象，它们分别在 1 秒和 2 秒后变为 fulfilled 状态，并返回两个字符串。然后使用 Promise.all 方法将它们封装成一个新的 Promise 对象，并在所有 Promise 对象都变为 fulfilled 状态后打印它们的拼接结果。

SetTimeout 的用法

SetTimeout 是 JavaScript 提供的一个用于延迟执行任务的方法。它接受两个参数，分别是需要延迟执行的函数和延迟的毫秒数。

setTimeout(() => {
  console.log("Hello, World!");
}, 1000);

上面的代码在 1 秒后执行一个匿名函数，打印 "Hello, World!"。

将 Promise 和 SetTimeout 结合使用可以处理更复杂的异步任务。例如，如果需要按顺序执行一系列异步操作，可以使用 then 方法串联多个 Promise 对象，并使用 SetTimeout 方法来延迟执行下一个操作。

// www.javascriptcn.com code example
const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Hello");
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("World");
  }, 2000);
});

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

上面的代码创建了两个 Promise 对象，它们分别在 1 秒和 2 秒后变为 fulfilled 状态，并返回两个字符串。然后使用 promise1 的 then 方法打印第一个字符串，并返回 promise2，使用 promise2 的 then 方法打印第二个字符串。

结语

Promise 和 SetTimeout 是 JavaScript 中处理异步任务的基本工具，它们可以让我们更加简洁和灵活地处理异步任务，而不需要使用回调函数。使用 Promise 和 SetTimeout 的过程中需要注意，合理地处理异步操作的依赖关系，并对错误处理进行充分地考虑。同时，我们也要注意兼容性问题，并尽可能地使用 ES6 的语法。

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

如何使用 Promise 和 SetTimeout 处理异步任务