异步模型

// ❌ 2010 年代代码：嵌套 5 层
fs.readFile("a.txt", (err, dataA) => {
  if (err) return handleError(err);
  fs.readFile("b.txt", (err, dataB) => {
    if (err) return handleError(err);
    fs.readFile("c.txt", (err, dataC) => {
      if (err) return handleError(err);
      saveResult(dataA + dataB + dataC, (err) => {
        if (err) return handleError(err);
        console.log("done");
      });
    });
  });
});

// ✅ 2017+ 写法：扁平、可读
try {
  const [a, b, c] = await Promise.all([
    fs.promises.readFile("a.txt"),
    fs.promises.readFile("b.txt"),
    fs.promises.readFile("c.txt"),
  ]);
  await saveResult(a + b + c);
  console.log("done");
} catch (err) {
  handleError(err);
}

// 如果 fetchData 是同步的（hypothetical）：
const data = fetchData(); // 阻塞 2 秒
renderUI(data);
 
// 这 2 秒里，浏览器无法响应任何用户操作——点击、滚动、输入全部冻结

// 同步：阻塞，按顺序执行
console.log("1");
const data = syncReadFile("a.txt"); // 假设这里阻塞 1 秒
console.log("2");
// 输出顺序：1（等 1 秒）→ 2
 
// 异步：非阻塞，不等待
console.log("1");
asyncReadFile("a.txt", (data) => console.log("2"));
console.log("3");
// 输出顺序：1 → 3 → 2（IO 完成后回调）

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    if (Math.random() > 0.5) {
      resolve("success");
    } else {
      reject(new Error("failed"));
    }
  }, 1000);
});
 
promise
  .then((value) => {
    console.log(value); // 'success'
  })
  .catch((error) => {
    console.error(error); // Error: failed
  });

fetch("/api/user")
  .then((response) => response.json()) // 返回 Promise<user>
  .then((user) => fetch(`/api/posts?userId=${user.id}`)) // 返回 Promise<response>
  .then((response) => response.json()) // 返回 Promise<posts>
  .then((posts) => {
    console.log(posts);
  })
  .catch((error) => {
    console.error("请求链中任何一步出错都会到这里");
  })
  .finally(() => {
    console.log("无论成败都执行（如关闭 loading）");
  });

fetchUser()
  .then((user) => fetchPosts(user.id)) // 这步出错
  .then((posts) => render(posts)) // 跳过
  .then((html) => insertToDom(html)) // 跳过
  .catch((err) => console.error(err)); // 捕获到 fetchPosts 的错

fetchUser()
  .then((user) => fetchPosts(user.id))
  .catch((err) => {
    console.warn("fetchPosts failed, using empty array");
    return []; // 返回值让链恢复
  })
  .then((posts) => render(posts)); // 仍会执行（posts 是空数组）

fetchUser()
  .catch((err) => {
    throw new Error(`Wrapped: ${err.message}`); // 抛出新错误
  })
  .catch((err) => {
    // 这里捕获到 wrapped 错误
  });

// ❌ 反例：没写 .catch，错误被吞没
fetchUser().then((user) => render(user));
//          ↑ 如果 fetchUser 失败，控制台会报 "Uncaught (in promise)"
//             但代码不会崩溃，错误处理被遗漏

const promise = Promise.resolve("A");
 
promise.then((v) => console.log(v)); // 'A'
promise.then((v) => console.log(v)); // 'A' —— 同一个值
promise.then((v) => console.log(v)); // 'A' —— 多次访问无副作用

// ❌ 反例：以为能"重新跑"
const p = fetchData();
await p;
await p; // 不会重新请求，直接拿之前的值
 
// ✅ 正例：每次创建新 Promise
const fetchAgain = () => fetchData();
await fetchAgain();
await fetchAgain(); // 每次都是新请求

你想要什么？
 
├─ 需要所有结果，任一失败就停
│  └─ Promise.all
│     例：并发加载多张图片 / 多个 API，任一失败页面就报错
│
├─ 需要所有结果，不管成败
│  └─ Promise.allSettled
│     例：批量操作（如批量删除文件），每个独立成败，最后汇总报告
│
├─ 多个候选源，任一最快返回的就用
│  └─ Promise.race
│     例：超时控制（race 一个 setTimeout）/ 多个 CDN 取最快
│
└─ 多个候选源，任一成功就用
   └─ Promise.any
      例：备用源策略——主源失败自动 fallback 到备份

// 串行（慢，三个请求依次发）
const user = await fetchUser(); // 等 1 秒
const posts = await fetchPosts(); // 等 1 秒
const comments = await fetchComments(); // 等 1 秒
// 总耗时：3 秒
 
// 并行（快，三个请求同时发）
const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);
// 总耗时：1 秒（取最慢的那个）

try {
  const [a, b, c] = await Promise.all([
    fetchA(), // 成功
    fetchB(), // 失败
    fetchC(), // 成功
  ]);
} catch (err) {
  // 只能拿到 fetchB 的错误
  // fetchA 和 fetchC 的结果完全丢失
}

const results = await Promise.allSettled([
  deleteFile("a.txt"),
  deleteFile("b.txt"),
  deleteFile("c.txt"),
]);
 
results.forEach((result, index) => {
  if (result.status === "fulfilled") {
    console.log(`${index} 删除成功`);
  } else {
    console.warn(`${index} 删除失败:`, result.reason);
  }
});

function fetchWithTimeout(url, ms = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) => setTimeout(() => reject(new Error("timeout")), ms)),
  ]);
}
 
// 使用
try {
  const response = await fetchWithTimeout("/api/slow", 3000);
} catch (err) {
  // 3 秒内没返回就抛 timeout
  // 或者 fetch 自己出错也抛
}

// 三个 CDN，任一成功就用
const html = await Promise.any([
  fetch("https://cdn-a.example.com/index.html"),
  fetch("https://cdn-b.example.com/index.html"),
  fetch("https://cdn-c.example.com/index.html"),
]);
// 全部失败时抛 AggregateError，包含所有错误

// Promise 写法
function fetchUser() {
  return fetch("/api/user")
    .then((res) => res.json())
    .then((user) => {
      console.log(user);
      return user;
    });
}
 
// async-await 等价写法
async function fetchUser() {
  const res = await fetch("/api/user");
  const user = await res.json();
  console.log(user);
  return user; // 自动包装成 Promise.resolve(user)
}

async function fetchData() {
  try {
    const response = await fetch("/api/data");
    const data = await response.json();
    return data;
  } catch (error) {
    // 捕获 fetch / json 任一步的错误
    console.error("Failed to fetch:", error);
    throw error; // 重新抛出或处理
  }
}

async function bad() {
  throw new Error("oops");
}
 
// ❌ 调用者没 catch，错误被吞没
bad(); // Uncaught (in promise)
 
// ✅ 调用者负责 catch
bad().catch((err) => console.error(err));
 
// 或者用 await + try/catch
try {
  await bad();
} catch (err) {
  console.error(err);
}

// ✅ ESM 顶层（不需要包在 async 函数里）
const config = await fetch("/config.json").then((r) => r.json());
 
export default config;

async function fetchUser() {
  return await fetch("/api/user"); // await 多余？
}
 
// 等价于
async function fetchUser() {
  return fetch("/api/user"); // 直接返回 Promise
}

async function fetchWithLog() {
  try {
    return await fetch("/api/user"); // ✅ 必须 await
    // 如果写 return fetch(...) 则 catch 捕获不到 fetch 的错误
  } catch (err) {
    console.error("Failed:", err);
    throw err;
  }
}

// ❌ 串行（慢）
async function fetchAll() {
  const user = await fetchUser(); // 等 1 秒
  const posts = await fetchPosts(); // 等 1 秒
  return { user, posts }; // 总耗时 2 秒
}
 
// ✅ 并行（快）
async function fetchAll() {
  const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
  return { user, posts }; // 总耗时 1 秒
}

// ❌ 反例：forEach 不等待
async function processAll(items) {
  items.forEach(async (item) => {
    await processItem(item); // forEach 不等这个 await
  });
  console.log("done"); // 会立即执行，不等 processItem 完成
}
 
// ✅ 正例：用 for...of
async function processAll(items) {
  for (const item of items) {
    await processItem(item);
  }
  console.log("done"); // 等所有 item 都处理完
}
 
// ✅ 正例：并行处理
async function processAll(items) {
  await Promise.all(items.map((item) => processItem(item)));
  console.log("done");
}

1. 执行同步代码到栈空
2. 清空整个微任务队列（这一步会一直循环到队列空）
3. 取出一个宏任务执行
4. 重复步骤 2-3

console.log("1");
 
setTimeout(() => console.log("2"), 0);
 
Promise.resolve().then(() => console.log("3"));
 
console.log("4");

console.log("1");
 
setTimeout(() => console.log("2"), 0);
 
Promise.resolve().then(() => {
  console.log("3");
  Promise.resolve().then(() => console.log("4"));
});
 
console.log("5");

function handleClick() {
  setCount((c) => c + 1); // 不立即触发渲染
  setFlag((f) => !f); // 不立即触发渲染
  setName("Alice"); // 不立即触发渲染
  // 当前同步代码执行完后，React 在微任务里统一渲染一次
}

const controller = new AbortController();
const signal = controller.signal;
 
// 把 signal 传给可取消的 API
fetch("/api/data", { signal })
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => {
    if (err.name === "AbortError") {
      console.log("请求被取消");
    } else {
      console.error("其他错误:", err);
    }
  });
 
// 在另一个地方取消
setTimeout(() => controller.abort(), 3000);

// 2023+ 的标准写法
fetch("/api/data", {
  signal: AbortSignal.timeout(5000), // 5 秒超时
});

// ❌ 反例：组件卸载后 setState
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    fetch(`/api/user/${userId}`)
      .then((res) => res.json())
      .then((data) => setUser(data)); // 组件可能已卸载
  }, [userId]);
 
  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
 
  useEffect(() => {
    const controller = new AbortController();
 
    fetch(`/api/user/${userId}`, { signal: controller.signal })
      .then((res) => res.json())
      .then((data) => setUser(data))
      .catch((err) => {
        if (err.name !== "AbortError") {
          console.error(err);
        }
      });
 
    return () => controller.abort(); // 组件卸载或 userId 变化时取消
  }, [userId]);
 
  return user ? <div>{user.name}</div> : <div>Loading...</div>;
}

async function pool(items, concurrency, fn) {
  const results = [];
  const executing = [];
 
  for (const item of items) {
    const p = Promise.resolve().then(() => fn(item));
    results.push(p);
 
    if (items.length >= concurrency) {
      const e = p.then(() => executing.splice(executing.indexOf(e), 1));
      executing.push(e);
      if (executing.length >= concurrency) {
        await Promise.race(executing);
      }
    }
  }
 
  return Promise.all(results);
}
 
// 使用
const urls = Array.from({ length: 100 }, (_, i) => `/api/item/${i}`);
const results = await pool(urls, 10, fetch);

async function retry(fn, maxAttempts = 3, baseDelay = 1000) {
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      return await fn();
    } catch (err) {
      if (attempt === maxAttempts) throw err;
 
      const delay = baseDelay * 2 ** (attempt - 1); // 1s, 2s, 4s
      console.warn(`Attempt ${attempt} failed, retry in ${delay}ms`);
      await new Promise((r) => setTimeout(r, delay));
    }
  }
}
 
// 使用
const data = await retry(() => fetch("/api/data").then((r) => r.json()), 3);

async function* fetchPages(urls) {
  for (const url of urls) {
    const data = await fetch(url).then((r) => r.json());
    yield data;
  }
}
 
// 用 for await 串行处理
for await (const page of fetchPages(urls)) {
  console.log(page);
  // 拿到一个就立即处理，不用等所有完成
}

// ❌ 反例
async function fetchData() {
  const res = await fetch("/api/data"); // 可能失败
  return res.json();
}
 
// ✅ 正例 1：函数内处理
async function fetchData() {
  try {
    const res = await fetch("/api/data");
    return res.json();
  } catch (err) {
    console.error("Failed to fetch:", err);
    throw err; // 或返回默认值
  }
}
 
// ✅ 正例 2：调用者处理
fetchData().catch((err) => console.error(err));

// ❌ 反例
async function processAll(items) {
  items.forEach(async (item) => {
    await processItem(item);
  });
  console.log("done"); // 立即执行，不等 processItem
}
 
// ✅ 正例 1：串行
async function processAll(items) {
  for (const item of items) {
    await processItem(item);
  }
  console.log("done");
}
 
// ✅ 正例 2：并行
async function processAll(items) {
  await Promise.all(items.map((item) => processItem(item)));
  console.log("done");
}

// ❌ 反例（总耗时 3 秒）
const user = await fetchUser(); // 1 秒
const posts = await fetchPosts(); // 1 秒
const comments = await fetchComments(); // 1 秒
 
// ✅ 正例（总耗时 1 秒）
const [user, posts, comments] = await Promise.all([fetchUser(), fetchPosts(), fetchComments()]);

// ❌ 反例：删除 10 个文件，一个失败其他结果全丢
const results = await Promise.all(files.map(deleteFile));
 
// ✅ 正例：每个文件独立成败
const results = await Promise.allSettled(files.map(deleteFile));
results.forEach((result, i) => {
  if (result.status === "fulfilled") {
    console.log(`${i} 删除成功`);
  } else {
    console.warn(`${i} 删除失败:`, result.reason);
  }
});

// ❌ 反例
const promise = fetch("/api/data");
// 没有 promise.cancel() 方法
 
// ✅ 正例
const controller = new AbortController();
fetch("/api/data", { signal: controller.signal });
 
// 取消
controller.abort();

// ❌ 反例
useEffect(() => {
  fetch("/api/data").then((data) => setState(data));
}, []);
 
// ✅ 正例
useEffect(() => {
  const controller = new AbortController();
  fetch("/api/data", { signal: controller.signal })
    .then((data) => setState(data))
    .catch((err) => {
      if (err.name !== "AbortError") console.error(err);
    });
 
  return () => controller.abort();
}, []);

// ❌ 反例：微任务无限循环
function bad() {
  Promise.resolve().then(() => bad()); // 立即排入微任务队列
}
bad(); // 页面卡死

// ✅ 正例
function good() {
  setTimeout(() => good(), 0); // 每次让出控制权
}
good(); // 不会卡死（虽然也是无限循环，但浏览器能渲染）

// ❌ 反例
async function fetchAndProcess() {
  fetch("/api/data")
    .then((res) => res.json())
    .then((data) => process(data)); // 没 return
 
  console.log("done"); // 立即执行，不等 fetch 完成
}
 
// ✅ 正例 1：return Promise 链
async function fetchAndProcess() {
  return fetch("/api/data")
    .then((res) => res.json())
    .then((data) => process(data));
}
 
// ✅ 正例 2：用 await
async function fetchAndProcess() {
  const res = await fetch("/api/data");
  const data = await res.json();
  return process(data);
}