深入理解JavaScript中的“浮动承诺”及其处理策略

// test.json
// { "ingredients": "flour,sugar,butter,chocolate" }

const listOfIngredients = [];

function processIngredients() {
  fetch('http://127.0.0.1:4000/test.json')
    .then((res) => res.json())
    .then((data) => {
      // 这里的 forEach 是同步操作，不涉及启动新的 Promise，因此这里没有“浮动承诺”
      data.ingredients.split(',').forEach(i => listOfIngredients.push(i));
      console.log('第一步：配料已添加:', listOfIngredients);

      // 假设我们在这里启动了另一个异步操作，但没有返回它的 Promise
      // 这是一个典型的“浮动承诺”示例
      fetch('http://another.api/details')
        .then(response => response.json())
        .then(details => console.log('第二步：额外详情已获取:', details))
        .catch(error => console.error('获取详情失败:', error));
      // 注意：这里没有 return fetch(...)
    })
    .then(() => {
      console.log('第三步：Promise链的下一步执行。');
      // 此时，“额外详情已获取”的消息可能还未打印，因为上一个 then 没有等待 fetch 的完成
    })
    .catch(error => console.error('主流程错误:', error));
}

processIngredients();

第一步：配料已添加: ['flour', 'sugar', 'butter', 'chocolate']
第三步：Promise链的下一步执行。
第二步：额外详情已获取: { ...details... } // 可能在“第三步”之后才出现

function fetchDataAndProcessBad() {
  fetch('http://127.0.0.1:4000/test.json')
    .then((res) => res.json())
    .then((data) => {
      console.log('数据已获取并处理:', data);
    })
    .catch(error => console.error('处理失败:', error));
  // 注意：这里没有 return fetch(...)
}

console.log('调用函数前');
fetchDataAndProcessBad();
console.log('调用函数后'); // 这行代码会立即执行，不会等待 fetch 完成
// 外部无法通过 .then() 或 await 等待 fetchDataAndProcessBad 的完成