首页 › JavaScript › 异步编程 › Promise 详解

回调地狱

// ❌ 回调地狱
getUser(id, (user) => {
  getPosts(user.id, (posts) => {
    getComments(posts[0].id, (comments) => {
      console.log(comments);
    });
  });
});

Promise 基础

const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve('成功数据');
    } else {
      reject(new Error('失败'));
    }
  }, 1000);
});

promise
  .then(data => console.log(data))
  .catch(err => console.error(err))
  .finally(() => console.log('完成'));

链式调用

fetchUser(1)
  .then(user => fetchPosts(user.id))
  .then(posts => fetchComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error(err));

静态方法

// Promise.all：全部成功
const p1 = fetch('/api/users');
const p2 = fetch('/api/posts');
Promise.all([p1, p2])
  .then(([users, posts]) => console.log(users, posts))
  .catch(err => console.error('任一失败', err));

// Promise.allSettled：全部完成（不论成功失败）
Promise.allSettled([p1, p2])
  .then(results => {
    results.forEach(r => console.log(r.status, r.value || r.reason));
  });

// Promise.race：竞速（首个完成）
Promise.race([p1, fetchTimeout(5000)])
  .then(data => console.log(data));

// Promise.any：首个成功
Promise.any([p1, p2])
  .then(data => console.log(data));

小结

方法	行为	失败时
Promise.all	全部成功	首个失败即拒绝
Promise.allSettled	等全部完成	不拒绝
Promise.race	首个完成	首个失败即拒绝
Promise.any	首个成功	全部失败才拒绝

上一节：BOM 与表单处理 下一节：async/await 与错误处理

贡献者: 布欧-Lewyon