🏆 ES6 异步编程挑战营：从入门到........

🏆 ES6 异步编程挑战营

挑战规则 ：分为 5 个等级 ，每完成一个等级可获得对应称号。

👉 建议先独立完成，再对照答案。

---

🥉 Level 1 - 青铜挑战（基础概念）

题目1：Generator 基础

function* count() {
  yield 1;
  yield 2;
  return 3;
}

const gen = count();
console.log(gen.next()); // ?
console.log(gen.next()); // ?
console.log(gen.next()); // ?
console.log(gen.next()); // ?

---

题目2：Async 返回值

async function test() {
  return 42;
}

const result = test();
console.log(typeof result); // ?
result.then(console.log);   // ?

---

🥈 Level 2 - 白银挑战（进阶理解）

题目3：Generator 异步控制

function* asyncTask() {
  const result = yield new Promise(resolve =>
    setTimeout(() => resolve('done'), 1000)
  );
  console.log(result);
  return result;
}

// ❓ 如何手动执行这个 Generator 使其正常工作？
// 请写出最少代码

---

题目4：错误处理陷阱

async function fetchData() {
  try {
    const result = await Promise.reject('error');
    return result;
  } catch (e) {
    console.log('caught:', e);
    return 'fallback';
  }
}

fetchData().then(console.log); // 输出什么？

---

🥇 Level 3 - 黄金挑战（性能优化）

题目5：并发 vs 串行

// 写法A
async function methodA() {
  const result1 = await fetch('/api/1');
  const result2 = await fetch('/api/2');
  return [result1, result2];
}

// 写法B
async function methodB() {
  const [result1, result2] = await Promise.all([
    fetch('/api/1'),
    fetch('/api/2')
  ]);
  return [result1, result2];
}

请分析：

1. 时间复杂度差异
2. 适用场景
3. 错误处理差异

---

💎 Level 4 - 铂金挑战（底层原理）

题目6：状态机破译

function _callee$(_context) {
  while (1) {
    switch (_context.prev = _context.next) {
      case 0:
        _context.next = 2;
        return fetch('/user');
      case 2:
        user = _context.sent;
        _context.next = 5;
        return fetch(`/posts/${user.id}`);
      case 5:
        posts = _context.sent;
        return _context.abrupt("return", { user, posts });
      case 7:
      case "end":
        return _context.stop();
    }
  }
}

// ❓ 请写出对应的 async 函数

---

题目7：Polyfill 实现

// 实现简化版的 _asyncToGenerator 函数
function myAsyncToGenerator(generatorFn) {
  // 将 generator 转换为返回 Promise 的函数
}

// 测试用例
const testAsync = myAsyncToGenerator(function* () {
  const a = yield Promise.resolve(1);
  const b = yield Promise.resolve(2);
  return a + b;
});

testAsync().then(console.log); // 应该输出 3

---

🏆 Level 5 - 钻石挑战（综合应用）

题目8：万能调度器

// 实现一个函数，能够自动执行返回 Promise 的 Generator
function runAsyncGenerator(generatorFn, ...args) {
  // 要求：
  // 1. 支持 async/await 的所有行为
  // 2. 正确处理错误
  // 3. 支持参数传递
}

// 测试用例
runAsyncGenerator(function* (name, age) {
  const user = yield fetch(`/api/user/${name}`).then(r => r.json());
  const profile = yield fetch(`/api/profile/${user.id}?age=${age}`).then(r => r.json());
  return { user, profile };
}, 'alice', 25);

---

题目9：Generator 纠错大师

// 找出所有 bug 并修正
function* brokenGenerator() {
  yield 1;
  yield 2;
  return 3;
  yield 4; // 问题1

  if (false) {
    yield 5; // 问题2
  }

  const result = yield new Promise(resolve => resolve(6));
  console.log(result); // 问题3：如何正确获取？

  return Promise.resolve(7); // 问题4
}

// ❓ 如何正确执行这个 generator？

---

题目10：实战优化

// 优化以下代码
async function fetchUserData(userId) {
  const user = await fetch(`/api/user/${userId}`);
  const posts = await fetch(`/api/user/${userId}/posts`);
  const settings = await fetch(`/api/user/${userId}/settings`);

  return {
    user: await user.json(),
    posts: await posts.json(),
    settings: await settings.json()
  };
}

// ❓ 请提供 3 种优化方案，并分析各自优缺点

---

📊 答案与解析

🥉 Level 1 - 青铜挑战

题目1：Generator 基础

{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: true }
{ value: undefined, done: true }

题目2：Async 返回值

"object"
42

---

🥈 Level 2 - 白银挑战

题目3：Generator 异步控制

function execute(gen) {
  return new Promise((resolve, reject) => {
    const g = gen();
    function next(data) {
      const { value, done } = g.next(data);
      done ? resolve(value) : Promise.resolve(value).then(next, reject);
    }
    next();
  });
}

题目4：错误处理陷阱

// 控制台输出
caught: error
// Promise resolve 结果
fallback

---

🥇 Level 3 - 黄金挑战

题目5：并发 vs 串行

1. 时间复杂度

   • A：串行执行 → O(n+m)
   • B：并行执行 → O(max(n, m))

2. 适用场景

   • A：任务之间有依赖关系
   • B：任务相互独立

3. 错误处理

   • A：任意一个失败立即抛错
   • B：需统一处理 Promise.all 的错误

---

💎 Level 4 - 铂金挑战

题目6：状态机破译

async function original() {
  const user = await fetch('/user');
  const posts = await fetch(`/posts/${user.id}`);
  return { user, posts };
}

题目7：Polyfill 实现

function myAsyncToGenerator(generatorFn) {
  return function (...args) {
    return new Promise((resolve, reject) => {
      const gen = generatorFn.apply(this, args);
      function step(key, arg) {
        try {
          const { value, done } = gen[key](arg);
          done
            ? resolve(value)
            : Promise.resolve(value).then(next, reject);
        } catch (error) {
          reject(error);
        }
      }
      function next(val) { step("next", val); }
      next();
    });
  };
}

---

🏆 Level 5 - 钻石挑战

题目8：万能调度器

function runAsyncGenerator(generatorFn, ...args) {
  return new Promise((resolve, reject) => {
    const gen = generatorFn(...args);
    function nextStep(value) {
      try {
        const { value: nextValue, done } = gen.next(value);
        done
          ? resolve(nextValue)
          : Promise.resolve(nextValue).then(nextStep, reject);
      } catch (error) {
        reject(error);
      }
    }
    nextStep();
  });
}

---

题目9：Generator 纠错大师

修正版：

function* fixedGenerator() {
  yield 1;
  yield 2;
  yield 3; // return 改为 yield

  // yield 4 和 yield 5 永远不会执行

  const result = yield new Promise(resolve => resolve(6));
  console.log(result); // 正确获取：6

  return 7; // 直接返回值，不是 Promise
}

// 正确执行
runAsyncGenerator(fixedGenerator).then(console.log);

---

题目10：实战优化

👉 3 种优化方案

方案1：并行请求

async function optimized1(userId) {
  const [user, posts, settings] = await Promise.all([
    fetch(`/api/user/${userId}`).then(r => r.json()),
    fetch(`/api/user/${userId}/posts`).then(r => r.json()),
    fetch(`/api/user/${userId}/settings`).then(r => r.json())
  ]);
  return { user, posts, settings };
}

方案2：流式处理

async function optimized2(userId) {
  const [user, posts, settings] = await Promise.all([
    fetch(`/api/user/${userId}`),
    fetch(`/api/user/${userId}/posts`),
    fetch(`/api/user/${userId}/settings`)
  ].map(p => p.then(r => r.json())));
  return { user, posts, settings };
}

方案3：错误隔离

async function optimized3(userId) {
  const results = await Promise.allSettled([
    fetch(`/api/user/${userId}`).then(r => r.json()),
    fetch(`/api/user/${userId}/posts`).then(r => r.json()),
    fetch(`/api/user/${userId}/settings`).then(r => r.json())
  ]);
  return results.reduce((acc, result, index) => {
    const keys = ['user', 'posts', 'settings'];
    acc[keys[index]] = result.status === 'fulfilled' ? result.value : null;
    return acc;
  }, {});
}

---

🏅 称号系统

等级	正确题数	称号	技能描述
青铜	1-2 题	异步新手	理解基础概念
白银	3-4 题	Promise 学徒	掌握基本用法
黄金	5-6 题	并发大师	优化性能思路
铂金	7-8 题	状态机专家	理解底层原理
钻石	9-10 题	异步宗师	具备教学能力

---

✨ 挑战完成后，欢迎在评论区分享你的等级和解题心得！

---