本文深入探讨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）:
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 隐式返回Promiseasync 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的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1529802.html
微信扫一扫 
支付宝扫一扫 
