本文旨在深入探讨JavaScript中Promise的正确使用方式，特别是如何避免常见的Promise链式调用中断问题。我们将分析`new Promise`构造函数的使用场景，并对比`.then()`链式调用与`async/await`语法在构建健壮异步流程中的应用，帮助开发者优化其异步代码结构。

JavaScript Promise链式调用：核心概念与常见陷阱

在JavaScript异步编程中，Promise 提供了一种更清晰、更可控的方式来处理异步操作。然而，不当的使用方式，特别是对new Promise构造函数和Promise链式调用的误解，常常会导致代码行为不符合预期，例如Promise的.then()方法不被执行。

1. new Promise构造函数的正确使用

new Promise构造函数的主要目的是将非Promise风格的异步操作（例如基于回调函数或事件的API）封装成Promise。它接收一个执行器函数（executor function）作为参数，该函数会立即执行，并传入resolve和reject两个回调函数。开发者必须在异步操作成功时调用resolve()，在失败时调用reject()，以便Promise能够改变其状态并触发后续的.then()或.catch()。

常见陷阱：
许多开发者在不必要的情况下使用new Promise，或者在使用时忘记调用resolve或reject。例如，以下代码片段展示了一个常见的错误：

// 错误示例：Promise永远不会解决或拒绝
new Promise(function () {
   updateToDefaultLayerSetting(); // 即使 updateToDefaultLayerSetting 是异步的，这个 Promise 也不会被解决
}).then(function () {
    console.log("这个 then() 永远不会执行！");
});

在这个例子中，new Promise内部的执行器函数没有调用resolve或reject。因此，这个Promise将永远处于pending状态，其后续的.then()回调函数也永远不会被执行。

正确用法示例：
当需要封装一个基于定时器或传统回调的异步操作时，new Promise才显得有意义。

function fetchDataWithDelay(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (data) {
        resolve(`数据获取成功: $`);
      } else {
        reject(new Error('数据为空，获取失败！'));
      }
    }, 1000);
  });
}

fetchDataWithDelay('用户信息').then(message => {
  console.log(message); // 1秒后输出 "数据获取成功: 用户信息"
}).catch(error => {
  console.error(error.message);
});

2. 充分利用现有Promise：.then()链式调用

如果一个函数（例如一个async函数或一个返回Promise的API方法）已经返回了一个Promise，那么就不需要再使用new Promise去包裹它。正确的做法是直接在该Promise上调用.then()来创建Promise链。.then()方法本身会返回一个新的Promise，允许我们进行链式调用，并将上一个Promise的结果传递给下一个回调函数。

重构 loadBasemap 函数 (使用 .then()):

假设 updateToDefaultLayerSetting 是一个 async 函数（因此它返回一个 Promise），我们可以这样重构 loadBasemap：

function loadBasemap(layers) {
  if (LayerSettings && LayerSettings.hasOwnProperty("basemap") && LayerSettings.basemap.hasOwnProperty("baseMapLayers")) {
    // updateToDefaultLayerSetting() 返回一个 Promise
    return updateToDefaultLayerSetting().then(function () {
      // 当 updateToDefaultLayerSetting 完成后，这个回调函数执行
      // 返回一个新的 Map 实例，这个 Map 实例会成为 loadBasemap 返回的 Promise 的解决值
      return new Map({
        basemap: Basemap.fromJSON(LayerSettings.basemap),
        layers: layers,
      });
    });
  } else {
    // 处理其他情况，例如返回一个已解决的 Promise 或抛出错误
    return Promise.reject(new Error("LayerSettings 配置不完整"));
  }
}

在这个重构后的loadBasemap函数中：

• 我们直接调用updateToDefaultLayerSetting()，它返回一个Promise。


• 我们在这个Promise上调用.then()。当updateToDefaultLayerSetting完成时，.then()的回调函数会被执行。


• 在该回调函数内部，我们创建并返回一个新的Map实例。这个Map实例将成为loadBasemap函数最终返回的Promise的解决值。

3. 现代化异步编程：async/await语法

async/await是ES2017引入的语法糖，它建立在Promise之上，旨在使异步代码看起来和行为更像同步代码，从而提高可读性和可维护性。async函数总是返回一个Promise，而await关键字只能在async函数内部使用，它会暂停async函数的执行，直到其后的Promise解决，并返回解决值。

Dreamina

字节跳动推出的AI绘画工具，用简单的文案创作精美的图片

4568



查看详情

重构 loadBasemap 函数 (使用 async/await):

使用async/await，loadBasemap函数可以变得更加简洁和直观：

async function loadBasemap(layers) {
  if (LayerSettings && LayerSettings.hasOwnProperty("basemap") && LayerSettings.basemap.hasOwnProperty("baseMapLayers")) {
    // await 会等待 updateToDefaultLayerSetting() 返回的 Promise 解决
    await updateToDefaultLayerSetting();
    // 一旦 await 完成，下面的代码会继续执行
    return new Map({
      basemap: Basemap.fromJSON(LayerSettings.basemap),
      layers: layers,
    });
  } else {
    // 处理其他情况
    throw new Error("LayerSettings 配置不完整");
  }
}

在这个async/await版本中：

• loadBasemap被声明为async函数，这意味着它将返回一个Promise。


• await updateToDefaultLayerSetting()会暂停函数的执行，直到updateToDefaultLayerSetting完成。


• 一旦updateToDefaultLayerSetting完成，new Map(...)这行代码才会执行，并且其返回值将作为loadBasemap函数所返回Promise的解决值。

4. 进一步优化 actionDefaultBasemap

原始的actionDefaultBasemap函数也存在类似的问题：不必要地使用了new Promise且没有调用resolve/reject。

// 原始 actionDefaultBasemap 函数片段
function actionDefaultBasemap() {
    let portalA = new Portal(portalConfig);

    new Promise(function () { // 同样没有 resolve/reject
        portalA.load().then(function () {
            defaultBasemap = portalA.useVectorBasemaps ? portalA.defaultVectorBasemap : portalA.defaultBasemap;
        }).then(function () {
            // ... 更新 LayerSettings ...
        });
    })
    // 这里返回的 Promise 可能会在 defaultBasemap 未初始化完成前就被解决
    return new Promise((resolve, reject) => resolve(defaultBasemap)); 
}

portalA.load()已经返回一个Promise，我们应该直接在其上进行链式操作。

重构 actionDefaultBasemap (使用 async/await):

var defaultBasemap; // 假设 defaultBasemap 在外部定义
async function actionDefaultBasemap() {
    let portalA = new Portal(portalConfig);
    // 等待 portalA 加载完成
    await portalA.load(); 

    defaultBasemap = portalA.useVectorBasemaps ? portalA.defaultVectorBasemap : portalA.defaultBasemap;

    if (LayerSettings.basemap.baseMapLayers[0].hasOwnProperty('url') && typeof defaultBasemap.resourceInfo !== "undefined") {
        LayerSettings.basemap.baseMapLayers[0].id = defaultBasemap.resourceInfo.data.baseMapLayers[0].id;
        LayerSettings.basemap.baseMapLayers[0].title = defaultBasemap.resourceInfo.data.baseMapLayers[0].title;
        LayerSettings.basemap.baseMapLayers[0].url = defaultBasemap.resourceInfo.data.baseMapLayers[0].url;
    }
    // 函数返回的 Promise 会以 defaultBasemap 作为解决值
    return defaultBasemap; 
}

在这个版本中，actionDefaultBasemap成为了一个async函数，它会等待portalA.load()完成，然后执行后续的逻辑，并最终返回defaultBasemap。这个defaultBasemap将成为actionDefaultBasemap返回的Promise的解决值。

总结与最佳实践

1. 
   避免不必要的 new Promise： 只有当你需要将一个非Promise的异步操作（如回调函数API）封装成Promise时，才使用new Promise。


2. 
   始终调用 resolve 或 reject： 在new Promise的执行器函数中，确保在异步操作完成后调用resolve()（成功）或reject()（失败），否则Promise将永远处于pending状态。


3. 
   利用现有Promise进行链式调用： 如果一个函数已经返回了一个Promise（例如async函数或某些库方法），直接在其上使用.then()或await进行链式操作。


4. 
   async/await 优先： 对于复杂的异步流程，async/await通常能提供更清晰、更易读的代码结构，推荐优先使用。


5. 
   返回Promise或值： 在.then()的回调函数或async函数中，返回一个值会使得下一个.then()接收到这个值；返回一个Promise会使得下一个.then()等待这个Promise解决。

通过遵循这些原则，可以有效地避免Promise链式调用中断的问题，并构建出更健壮、更易于理解和维护的异步JavaScript代码。

Java免费学习笔记：立即学习
解锁 Java 大师之旅：从入门到精通的终极指南

javascript java js json 回调函数 ai JavaScript 封装 构造函数 catch 回调函数 map function 事件 promise 异步 重构

大家都在看：

JavaScript 文件输入图片验证：解决状态反复切换的可靠方法
JavaScript对象按值排序的策略与实践
JavaScript实现动态背景切换与状态持久化
提升日期输入效率：JavaScript热键实现与跨年日期处理指南
理解TypeScript/JavaScript中的静态方法：超越“无类”的困惑