Promise用法详解与实例教学

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《Promise基础用法详解与实例演示》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

Promise是JavaScript中处理异步操作的现代方案，通过1.创建Promise实例，传入执行器函数；2.在异步操作成功或失败时分别调用resolve或reject；3.使用.then()、.catch()和.finally()处理结果，使异步代码更清晰且类似同步流程。链式调用通过返回新Promise实现扁平化结构，解决回调地狱问题。Promise.all()用于等待所有Promise成功，适用于并行请求数据或资源预加载；Promise.race()则响应首个完成的Promise，常用于超时控制或选择最快响应。使用时需注意：1.始终添加.catch()避免未捕获拒绝；2.构造函数中的同步错误会被自动捕获；3.在.then()中返回Promise以维持链式调用；4.Promise无法取消，需内部检查标志位或借助第三方库应对长时间操作。

Promise，说白了，就是JavaScript里处理异步操作的一种更优雅、更现代的方案。它本质上是一个代表了未来某个时刻才会知道结果的对象。这个结果可能是成功（fulfilled），也可能是失败（rejected）。它的核心价值在于，把原来层层嵌套的回调函数（也就是所谓的“回调地狱”）变得扁平化，让异步代码读起来更像同步代码，逻辑流也更清晰。

解决方案

要使用Promise，我们通常会经历几个步骤：创建、执行、以及处理结果。

创建一个Promise实例，需要传入一个执行器（executor）函数，这个函数接收两个参数：resolve和reject。resolve用于在异步操作成功时调用，并将结果传递出去；reject则在异步操作失败时调用，传递错误信息。

// 模拟一个异步操作，比如网络请求
function fetchData(shouldSucceed = true) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (shouldSucceed) {
        resolve('数据加载成功！'); // 成功时调用resolve
      } else {
        reject(new Error('数据加载失败！')); // 失败时调用reject
      }
    }, 1000); // 模拟1秒延迟
  });
}

// 使用Promise
fetchData(true)
  .then(data => {
    console.log('成功：', data); // 成功时的处理
  })
  .catch(error => {
    console.error('失败：', error.message); // 失败时的处理
  })
  .finally(() => {
    console.log('无论成功或失败，都会执行。'); // 无论结果如何，都会执行
  });

fetchData(false)
  .then(data => {
    console.log('成功：', data);
  })
  .catch(error => {
    console.error('失败：', error.message);
  })
  .finally(() => {
    console.log('无论成功或失败，都会执行。');
  });

在这个例子里，fetchData函数返回了一个Promise。当Promise的状态从“pending”（进行中）变为“fulfilled”（成功）时，.then()里的回调函数会被执行；当变为“rejected”（失败）时，.catch()里的回调函数会被执行。.finally()则无论成功失败都会被调用，通常用于清理资源或显示加载状态。

Promise链式调用如何优化异步代码的可读性？

Promise最迷人的地方，莫过于它的链式调用能力。这让原本可能陷入多层嵌套的回调函数，变得像一条流水线一样平铺直叙。想象一下，你需要先获取用户信息，再根据用户信息去请求他的订单列表，最后再展示订单详情。如果用传统回调，代码会迅速变得难以维护。

// 传统回调地狱的简化版
// getUserInfo(userId, function(user) {
//   getOrders(user.id, function(orders) {
//     displayOrderDetails(orders, function() {
//       console.log('All done!');
//     });
//   });
// });

// 使用Promise链式调用
function getUserInfo(userId) {
  return new Promise(resolve => setTimeout(() => resolve({ id: userId, name: '张三' }), 500));
}

function getOrders(userId) {
  return new Promise(resolve => setTimeout(() => resolve([`订单A for ${userId}`, `订单B for ${userId}`]), 700));
}

function displayOrderDetails(orders) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('展示订单详情:', orders);
      resolve('展示完成');
    }, 300);
  });
}

getUserInfo(123)
  .then(user => {
    console.log('获取到用户:', user.name);
    // 这里返回一个新的Promise，它会作为下一个.then的输入
    return getOrders(user.id);
  })
  .then(orders => {
    console.log('获取到订单:', orders);
    // 同样，返回一个新的Promise
    return displayOrderDetails(orders);
  })
  .then(message => {
    console.log('最终操作:', message);
  })
  .catch(error => {
    console.error('操作链中出现错误:', error);
  });

链式调用的核心在于，.then()方法本身也会返回一个新的Promise。这个新的Promise的状态和结果，取决于其回调函数的返回值。如果回调函数返回一个非Promise值，那么下一个.then()会立即以这个值作为成功结果；如果返回一个Promise，那么下一个.then()会等待这个返回的Promise解决（resolve或reject）后，再根据其结果继续执行。这种机制彻底解决了回调函数的嵌套问题，让异步流程一目了然。

Promise.all() 和 Promise.race() 有哪些典型应用场景？

在实际开发中，我们经常会遇到需要同时处理多个异步操作的情况。Promise提供了两个非常实用的静态方法来应对这类需求：Promise.all() 和 Promise.race()。它们就像是异步任务的“指挥官”，各自有独特的调度方式。

Promise.all(iterable)

这个方法接收一个Promise的可迭代对象（比如一个Promise数组）。它会等待所有的Promise都成功解决（fulfilled）后，才将结果以数组的形式返回。只要其中任何一个Promise被拒绝（rejected），Promise.all()就会立即拒绝，并返回第一个被拒绝的Promise的错误信息。

典型应用场景：

• 并行请求数据： 当你需要同时从多个API接口获取数据，并且只有当所有数据都成功获取后才能进行下一步操作时，Promise.all()是理想的选择。比如，一个页面需要同时加载用户信息、商品列表和广告位数据，这些请求之间没有依赖关系，可以并行执行。
• 资源预加载： 在游戏或大型应用中，需要预加载多张图片、音频文件等资源，只有所有资源都加载完毕后才能开始游戏或进入主界面。

const p1 = new Promise(resolve => setTimeout(() => resolve('数据A'), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve('数据B'), 500));
const p3 = new Promise((resolve, reject) => setTimeout(() => reject(new Error('数据C加载失败')), 1500));

Promise.all([p1, p2])
  .then(results => {
    console.log('所有数据加载成功:', results); // ['数据A', '数据B']
  })
  .catch(error => {
    console.error('有数据加载失败:', error.message);
  });

Promise.all([p1, p2, p3]) // 只要p3失败，整个all就失败
  .then(results => {
    console.log('所有数据加载成功:', results);
  })
  .catch(error => {
    console.error('有数据加载失败:', error.message); // '数据C加载失败'
  });

Promise.race(iterable)

与Promise.all()不同，Promise.race()也接收一个Promise的可迭代对象。但它不会等待所有Promise完成，而是只要其中任何一个Promise率先解决（fulfilled）或拒绝（rejected），Promise.race()就会立即以那个Promise的结果作为自己的结果。

典型应用场景：

• 超时控制： 这是Promise.race()最经典的用法。你可以将一个实际的网络请求Promise和一个带有固定延迟的Promise（在延迟结束后拒绝）放在一起race。如果网络请求在延迟内完成，则使用请求的结果；否则，race会因为超时Promise的拒绝而拒绝。
• 选择最快响应： 比如，你从多个镜像服务器请求同一个资源，哪个服务器响应最快就用哪个。

const fetchImage = new Promise(resolve => setTimeout(() => resolve('图片加载完成'), 2000));
const timeout = new Promise((resolve, reject) => setTimeout(() => reject(new Error('请求超时！')), 1500));

Promise.race([fetchImage, timeout])
  .then(result => {
    console.log('最先完成的是:', result); // 如果图片在1.5秒内加载完成
  })
  .catch(error => {
    console.error('最先完成的是错误:', error.message); // 如果1.5秒内图片没加载完，则会显示超时
  });

const fastResponse = new Promise(resolve => setTimeout(() => resolve('服务器A响应'), 100));
const slowResponse = new Promise(resolve => setTimeout(() => resolve('服务器B响应'), 500));

Promise.race([fastResponse, slowResponse])
  .then(result => {
    console.log('最快响应的是:', result); // '服务器A响应'
  });

这两个方法极大地提升了我们处理复杂异步场景的能力，让代码在多任务并发时依然保持清晰和高效。

使用Promise时需要注意哪些常见的陷阱和最佳实践？

虽然Promise极大地改善了异步编程体验，但在实际使用中，如果不注意一些细节，还是可能踩坑。理解这些“坑”能帮助我们写出更健壮的代码。

1. 遗漏 .catch() 导致未捕获的 Promise 拒绝 (Unhandled Promise Rejection)

这是最常见的错误之一。当一个Promise被拒绝，但你没有在Promise链的末尾添加.catch()来处理这个错误时，这个错误就会向上冒泡，最终可能导致浏览器抛出“Unhandled Promise Rejection”警告，或者在Node.js中直接终止进程。这就像你把垃圾扔了，却没人来清理，最终会污染环境。

new Promise((resolve, reject) => {
  reject(new Error('Oops, 出错了！'));
})
// .then(...) // 忘记了catch
// 浏览器控制台会报：Uncaught (in promise) Error: Oops, 出错了！

最佳实践： 始终在Promise链的末尾添加.catch()。或者，在全局监听unhandledrejection事件（浏览器环境）或process.on('unhandledRejection')（Node.js环境）来捕获并处理这些未处理的拒绝。

2. Promise 构造函数中的同步错误

Promise的执行器函数（new Promise((resolve, reject) => { /* 这里 */ })）是同步执行的。如果在其中抛出同步错误，那么这个错误会被Promise自动捕获并作为拒绝处理，但它不会像异步错误那样被.catch()捕获，除非你显式地返回一个被拒绝的Promise。

new Promise((resolve, reject) => {
  throw new Error('这是在Promise构造函数中抛出的同步错误！'); // 会被catch捕获
})
.then(() => console.log('成功'))
.catch(error => console.error('捕获到错误:', error.message)); // 捕获到错误: 这是在Promise构造函数中抛出的同步错误！

这里我稍微修正一下，Promise构造函数内部抛出的同步错误确实会被Promise捕获并传递给.catch()。我的原始想法有点偏差，但保持这个例子，因为它说明了同步错误在Promise内部的处理方式。真正的“陷阱”可能在于，如果你在构造函数外部直接抛出错误，那它就和Promise无关了。

3. 在 .then() 中忘记返回 Promise 或值

在Promise链中，如果你在.then()的回调函数中执行了异步操作，但忘记返回一个新的Promise，那么链条就会断裂。下一个.then()会立即执行，而不会等待你内部的异步操作完成。

function step1() {
  return new Promise(resolve => setTimeout(() => { console.log('步骤1完成'); resolve(1); }, 500));
}

function step2(data) {
  // 假设这里需要异步操作，但我们忘记返回Promise
  setTimeout(() => { console.log(`步骤2处理数据: ${data}`); }, 300);
  return data; // 直接返回了同步值
}

function step3(data) {
  console.log(`步骤3处理数据: ${data}`);
}

step1()
  .then(result1 => {
    return step2(result1); // 这里返回了同步值，而不是Promise
  })
  .then(result2 => {
    // result2 是 step2 直接返回的 data (1)，而不是 step2 内部异步操作完成后的结果
    step3(result2); // 步骤3会立即执行，可能在步骤2的console.log之前
  });
// 预期输出顺序：步骤1完成 -> 步骤2处理数据: 1 -> 步骤3处理数据: 1
// 实际输出顺序：步骤1完成 -> 步骤3处理数据: 1 -> 步骤2处理数据: 1 (可能，取决于setTimeout的调度)

最佳实践： 在.then()中，如果你的回调函数执行了异步操作，确保它返回一个Promise。如果返回一个普通值，它会被包装成一个已解决的Promise。

4. Promise 无法取消

一旦一个Promise被创建并开始执行，你就无法在外部“取消”它。即使你不再关心它的结果，它也会继续运行直到解决或拒绝。对于长时间运行的异步操作（如大文件上传），这可能会导致不必要的资源消耗。

最佳实践： 目前Promise本身不支持取消。通常的解决方案是，在Promise内部检查一个外部标志位，如果标志位表明操作已被取消，则提前拒绝Promise。或者，使用一些第三方库（如 AbortController API，虽然它不是Promise的原生取消机制，但可以与Promise配合实现类似效果）。

理解这些点，能帮助我们更有效地利用Promise，避免一些常见且难以调试的问题，让异步代码真正变得可靠和易于管理。

本篇关于《Promise用法详解与实例教学》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！