深入理解与避免JavaScript中的“浮动”Promise-js教程-PHP中文网

深入理解与避免javascript中的“浮动”promise

本文深入探讨JavaScript中“浮动”Promise的概念、成因及其对异步编程链式操作的影响。通过示例代码，详细解释了何时需要从`then`回调中返回Promise对象，以及如何通过规范的返回机制或`async/await`模式来确保Promise链的完整性和可追踪性，从而避免潜在的异步逻辑问题。

在现代JavaScript异步编程中，Promise扮演着核心角色，它通过链式调用（.then().catch()）极大地改善了回调地狱问题，使异步代码更易于管理和理解。然而，如果不正确地使用Promise链，可能会遇到一个被称为“浮动”Promise的问题，这可能导致异步操作的结果无法被追踪，进而引发难以调试的逻辑错误。

什么是“浮动”Promise？

根据MDN文档的解释，当一个Promise处理程序（例如.then()中的回调函数）启动了一个新的Promise（即执行了一个异步操作，如fetch或setTimeout返回的Promise），但却没有将这个新的Promise返回时，这个Promise就被称为“浮动”的。一旦一个Promise“浮动”，外部代码或后续的.then()回调将无法追踪它的结算状态（成功或失败），也无法等待其完成。

关键在于，“浮动”指的是Promise对象本身未被返回，而不是其解决的数据未被返回。即使回调函数没有显式返回任何数据，只要它不启动新的异步操作，通常就不会导致“浮动”Promise。

立即学习“Java免费学习笔记（深入）”；

Promise链中的返回机制

理解Promise链的关键在于其返回机制。.then()方法总是返回一个新的Promise。这个新的Promise的解决值取决于其回调函数的返回值：

如果回调函数返回一个非Promise值，那么.then()返回的Promise将以该值解决。
如果回调函数返回一个Promise，那么.then()返回的Promise将“采用”这个返回的Promise的状态，即它会等待这个返回的Promise解决或拒绝，并以其最终值解决或拒绝。

正是第二点，是避免“浮动”Promise的关键。

示例分析：何时无需返回Promise

考虑以下JSON数据文件 test.json：

{
  "ingredients": "flour,sugar,butter,chocolate"
}

登录后复制

以及以下JavaScript代码片段：

const listOfIngredients = [];
console.clear();

function doSomething() {
  fetch('http://127.0.0.1:4000/test.json')
  .then((res) => res.json())
  .then((data) => {
    // 这是一个同步操作，不启动新的Promise
    data.ingredients.split(',').forEach(i => listOfIngredients.push(i)); 
    // 这里没有返回任何Promise，但不是问题
  })
  .then((nothing) => {
    console.log(nothing); // undefined，因为上一个then没有返回任何值
    console.log(listOfIngredients);
    return "and coconut"; // 返回一个非Promise值
  })
  .then((something) => {
    listOfIngredients.push(something);
    console.log(listOfIngredients);
  });
}
doSomething();

登录后复制

输出结果：

undefined
['flour', 'sugar', 'butter', 'chocolate']
['flour', 'sugar', 'butter', 'chocolate', 'and coconut']

登录后复制

在这个例子中，第二个.then回调 (data) => { ... } 内部执行了一个同步操作：将数据拆分并推入 listOfIngredients 数组。它没有返回任何值，也没有启动新的Promise。因此，虽然后续的 (nothing) 回调会接收到 undefined（因为它没有从上一个回调中获得任何值），但整个Promise链并没有中断，也没有出现“浮动”Promise。这是因为 data.ingredients.split(',').forEach(...) 不是一个异步操作，不需要被Promise包装或返回。

示例分析：何时必须返回Promise以避免“浮动”

假设我们在链中需要执行另一个异步操作。如果此时不返回Promise，就会出现“浮动”Promise。

错误示范（导致“浮动”Promise）:

百度智能云·曦灵

百度旗下的AI数字人平台

查看详情

const listOfIngredients = [];

function doSomethingBad() {
  fetch('http://127.0.0.1:4000/test.json')
  .then((res) => res.json())
  .then((data) => {
    data.ingredients.split(',').forEach(i => listOfIngredients.push(i));
    // 假设这里需要执行另一个异步操作，但没有返回它的Promise
    fetch('http://127.0.0.1:4000/another_data.json') // 启动了一个新Promise
    // 没有return这个fetch，导致它“浮动”
  })
  .then((resultOfPreviousPromise) => {
    // resultOfPreviousPromise 将是 undefined，因为它没有等待第二个fetch完成
    console.log('Result after floating promise:', resultOfPreviousPromise);
    // 这里的逻辑可能依赖于第二个fetch的结果，但现在无法获取
  });
}
doSomethingBad();

登录后复制

在这个例子中，第二个.then回调内部启动了另一个fetch请求，但没有return它。这意味着后续的.then回调不会等待这个新的fetch完成，而是会立即执行，并接收到undefined。这个内部的fetch操作变得“浮动”，其结果无法被后续链式调用追踪。

正确示范（避免“浮动”Promise）:

const listOfIngredients = [];

function doSomethingGood() {
  return fetch('http://127.0.0.1:4000/test.json') // 整个函数返回Promise链
  .then((res) => res.json())
  .then((data) => {
    data.ingredients.split(',').forEach(i => listOfIngredients.push(i));
    // 关键：返回新的异步操作Promise
    return fetch('http://127.00.1:4000/another_data.json'); 
  })
  .then((anotherRes) => anotherRes.json()) // 处理第二个fetch的结果
  .then((anotherData) => {
    console.log('Second fetch data:', anotherData);
    // 现在可以安全地使用第二个fetch的结果了
    return "final result";
  });
}

// 外部可以追踪这个Promise链
doSomethingGood().then(finalResult => {
  console.log('Entire chain finished with:', finalResult);
}).catch(error => {
  console.error('An error occurred:', error);
});

登录后复制

通过在第二个.then回调中return fetch(...)，我们确保了Promise链的连续性。后续的.then回调将等待这个新的fetch完成，并接收到其解决的值（或拒绝原因），从而避免了“浮动”Promise。

函数级别的“浮动”Promise：完整链的追踪

不仅仅是.then回调内部，如果一个函数（例如上面的doSomething）启动了一个Promise链，但自身没有返回这个Promise链，那么从外部调用这个函数时，也无法追踪其异步操作的完成状态。

错误示范（函数级别的“浮动”Promise）:

function loadData() {
  fetch('http://127.0.0.1:4000/test.json')
  .then(res => res.json())
  .then(data => {
    console.log('Data loaded:', data);
  });
  // 没有返回fetch Promise链
}

console.log('Starting data load...');
loadData();
console.log('Data load function executed.'); // 这会立即打印，无法保证数据已加载
// 无法使用.then()或await等待loadData完成

登录后复制

在这种情况下，console.log('Data load function executed.'); 会在 fetch 完成之前执行，因为 loadData() 函数没有返回任何东西来指示其异步操作的状态。

正确示范（函数级别避免“浮动”Promise）:

// 方式一：直接返回Promise链
function loadDataWithReturn() {
  return fetch('http://127.0.0.1:4000/test.json')
  .then(res => res.json())
  .then(data => {
    console.log('Data loaded:', data);
    return data; // 返回数据以便外部使用
  });
}

console.log('Starting data load...');
loadDataWithReturn().then(data => {
  console.log('Data load completed, received:', data);
}).catch(error => {
  console.error('Data load failed:', error);
});
console.log('Data load function executed, awaiting result...'); // 此时会等待

// 方式二：使用 async/await 隐式返回Promise
async function loadDataWithAsyncAwait() {
  const res = await fetch('http://127.0.0.1:4000/test.json');
  const data = await res.json();
  console.log('Data loaded (async/await):', data);
  return data;
}

(async () => { // 使用IIFE来调用async函数
  console.log('Starting data load (async/await)...');
  try {
    const data = await loadDataWithAsyncAwait();
    console.log('Data load completed (async/await), received:', data);
  } catch (error) {
    console.error('Data load failed (async/await):', error);
  }
  console.log('Data load function executed (async/await), awaiting result...');
})();

登录后复制

通过return整个Promise链，或者将函数声明为async（async函数总是返回一个Promise），外部调用者就可以通过.then()或await来等待异步操作完成，从而避免了函数级别的“浮动”Promise。

async/await：隐式的Promise返回

async/await语法是处理Promise链的更现代、更易读的方式。它在底层依然是基于Promise实现的，但通过同步的语法来编写异步代码。await关键字会暂停async函数的执行，直到其后的Promise解决，并返回其解决值。async函数本身总是返回一个Promise，其解决值是函数内部return的值。

这使得async/await在很大程度上隐式地处理了Promise的返回，从而自然地避免了许多“浮动”Promise的问题。当你await一个Promise时，你实际上是在等待它被返回并在内部被处理。

async function processIngredients() {
  try {
    const res = await fetch('http://127.0.0.1:4000/test.json');
    const data = await res.json();
    const ingredients = data.ingredients.split(',');
    console.log('Ingredients:', ingredients);

    // 假设需要获取更多数据
    const anotherRes = await fetch('http://127.0.0.1:4000/another_data.json');
    const anotherData = await anotherRes.json();
    console.log('Another data:', anotherData);

    return { ingredients, anotherData }; // async函数返回一个Promise，其解决值为这个对象
  } catch (error) {
    console.error('Error processing ingredients:', error);
    throw error; // 向上抛出错误，async函数返回的Promise会拒绝
  }
}

processIngredients().then(result => {
  console.log('Final result of processing:', result);
}).catch(err => {
  console.error('Caught error from processIngredients:', err);
});

登录后复制

在这个async/await的例子中，每个await都确保了前一个异步操作的完成，并且整个processIngredients函数作为一个Promise返回，其状态和结果可以被外部代码追踪。

最佳实践与注意事项

始终返回新的Promise： 当.then()回调内部启动了一个新的异步操作（例如另一个fetch、axios请求、setTimeout返回的Promise等），请务必return这个新的Promise。
函数应返回其Promise链： 如果一个函数封装了异步操作并返回一个Promise链，该函数本身也应该返回这个Promise链，以便外部调用者能够追踪其完成状态。
拥抱 async/await： 在大多数情况下，async/await能提供更清晰、更易读的异步代码，并且它能隐式地处理Promise的返回，从而减少“浮动”Promise的风险。
理解同步与异步： 并非所有回调都需要返回Promise。如果回调函数执行的是纯同步操作，则无需返回Promise。
错误处理： “浮动”Promise不仅影响结果的传递，还会使错误处理变得复杂。如果一个Promise“浮动”了，它的错误将无法被链中的.catch()捕获，可能导致未捕获的Promise拒绝。

总结

“浮动”Promise是JavaScript异步编程中一个常见的陷阱，它发生在Promise处理程序启动了新的异步操作但没有返回其Promise对象时。这会导致Promise链断裂，后续操作无法等待其完成，也无法追踪其结果或错误。通过严格遵守Promise链的返回机制，即在.then()回调中返回任何新的Promise，以及确保封装异步操作的函数也返回其Promise链，我们可以有效地避免“浮动”Promise。async/await语法提供了一种更简洁、更健壮的方式来管理异步流，它通过隐式地处理Promise返回，进一步降低了出现“浮动”Promise的可能性。理解并避免“浮动”Promise是编写健壮、可维护的JavaScript异步代码的关键。

以上就是深入理解与避免JavaScript中的“浮动”Promise的详细内容，更多请关注php中文网其它相关文章！