js异步promise链式调用_js异步promise链式写法解析-js教程-PHP中文网

js异步promise链式调用_js异步promise链式写法解析

裘德小鎮的故事

发布： 2025-06-19 20:21:04

原创

566人浏览过

promise链式调用通过.then()返回新promise实现异步顺序执行，错误使用.catch()捕获并置于链末尾确保全局捕获；async/await以同步方式简化异步代码，用try/catch处理错误；promise.all适用于并行任务全成功才继续，而promise.race用于响应首个完成的任务。例如链式调用中每个.then()返回新promise决定后续状态，错误在.catch()中集中处理；async函数内用await等待异步结果，结构更清晰；promise.all接收多个promise数组并等全部成功或任一失败，promise.race则取最快完成的结果。

js异步promise链式调用_js异步promise链式写法解析

异步 Promise 链式调用，简单来说，就是让一堆需要按顺序执行的异步操作，像链条一样一个接一个地执行，避免回调地狱，让代码更清晰易懂。

Promise 链式调用，让异步操作更像同步代码，可读性更高，也更容易维护。

Promise 链的本质是，每个.then()方法都会返回一个新的 Promise 对象。这个新的 Promise 对象的状态，取决于.then()中回调函数的返回值。如果回调函数返回一个 Promise，那么新的 Promise 的状态就会和这个返回的 Promise 的状态保持一致；如果回调函数返回一个普通值，那么新的 Promise 的状态就会变成 resolved，并且这个返回值会作为下一个.then()方法的回调函数的参数。

function asyncTask(value) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = value * 2;
      console.log(`Task completed with result: ${result}`);
      resolve(result);
      //reject('Something went wrong'); // 模拟错误
    }, 500);
  });
}

asyncTask(5)
  .then(result => {
    console.log('First then:', result);
    return asyncTask(result); // 返回一个新的Promise
  })
  .then(result => {
    console.log('Second then:', result);
    return asyncTask(result); // 再次返回一个新的Promise
  })
  .then(result => {
    console.log('Third then:', result);
    return "Finished!";
  })
  .then(finalResult => {
    console.log('Final result:', finalResult);
  })
  .catch(error => {
    console.error('Error occurred:', error);
  })
  .finally(() => {
    console.log('Chain completed');
  });

登录后复制

如何处理 Promise 链中的错误？

Promise 链中的错误处理，主要依赖.catch()方法。.catch()方法会捕获链中任何一个 Promise 的 reject 状态。这意味着，如果链中任何一个 Promise 抛出错误，.catch()方法就会被调用。需要注意的是，.catch()方法只会捕获它之前的 Promise 的错误。如果想要处理整个链的错误，应该在链的末尾添加.catch()方法。

asyncTask(5)
  .then(result => {
    console.log('First then:', result);
    return asyncTask(result);
  })
  .then(result => {
    console.log('Second then:', result);
    throw new Error("Simulated error in second then"); // 模拟错误
    return asyncTask(result);
  })
  .then(result => {
    console.log('Third then:', result);
    return "Finished!";
  })
  .then(finalResult => {
    console.log('Final result:', finalResult);
  })
  .catch(error => {
    console.error('Error occurred:', error); // 这里会捕获到 "Simulated error in second then"
  })
  .finally(() => {
    console.log('Chain completed');
  });

登录后复制

Async/Await 如何简化 Promise 链？

Async/Await 是 ES2017 引入的语法糖，可以更简洁地处理 Promise。使用 Async/Await 可以让异步代码看起来更像同步代码，从而提高代码的可读性和可维护性。Async 函数会隐式地返回一个 Promise，而 Await 关键字会暂停 Async 函数的执行，直到 Promise 的状态变成 resolved。

async function runTasks() {
  try {
    let result = await asyncTask(5);
    console.log('First result:', result);

    result = await asyncTask(result);
    console.log('Second result:', result);

    result = await asyncTask(result);
    console.log('Third result:', result);

    console.log('Finished!');
  } catch (error) {
    console.error('Error occurred:', error);
  } finally {
    console.log('Tasks completed');
  }
}

runTasks();

登录后复制

Async/Await 实际上是 Promise 的语法糖，底层依然是 Promise。使用 Async/Await 可以避免.then()方法的嵌套，让代码更易于理解。Async/Await 的错误处理使用 try...catch 语句，也比 Promise 的.catch()方法更直观。

Promise.all 和 Promise.race 的应用场景

Promise.all 和 Promise.race 是处理多个 Promise 的工具函数。Promise.all 接收一个 Promise 数组，并返回一个新的 Promise。这个新的 Promise 会在所有 Promise 都变成 resolved 状态时变成 resolved，或者在任何一个 Promise 变成 rejected 状态时变成 rejected。Promise.race 也接收一个 Promise 数组，并返回一个新的 Promise。这个新的 Promise 会在第一个 Promise 变成 resolved 或 rejected 状态时，就立即变成对应的状态。

Promise.all: 适合处理需要并行执行的异步操作，例如同时请求多个 API 接口，等待所有接口都返回数据后，再进行下一步处理。

const promise1 = asyncTask(5);
const promise2 = asyncTask(10);
const promise3 = asyncTask(15);

Promise.all([promise1, promise2, promise3])
  .then(results => {
    console.log('All results:', results); // [10, 20, 30]
  })
  .catch(error => {
    console.error('Error occurred:', error);
  });

登录后复制

Promise.race: 适合处理竞态条件，例如设置一个超时时间，如果异步操作在超时时间内没有完成，就认为操作失败。

const promise = asyncTask(5);
const timeout = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Timeout');
  }, 1000);
});

Promise.race([promise, timeout])
  .then(result => {
    console.log('Result:', result); // 如果 promise 在 1 秒内完成，则输出结果
  })
  .catch(error => {
    console.error('Error occurred:', error); // 如果超时，则输出 'Timeout'
  });

登录后复制

选择使用 Promise.all 还是 Promise.race，取决于具体的业务场景。如果需要等待所有异步操作都完成，就使用 Promise.all；如果只需要等待第一个异步操作完成，或者需要处理竞态条件，就使用 Promise.race。

以上就是js异步promise链式调用_js异步promise链式写法解析的详细内容，更多请关注php中文网其它相关文章！