事件循环与异步编程：从消息队列到 async/await

// 事件循环的简化伪代码
TaskQueue task_queue;
bool keep_running = true;

void MainThread() {
  for (;;) {
    Task task = task_queue.takeTask();
    ProcessTask(task);

    if (!keep_running)
      break;
  }
}

console.log('script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(() => {
    console.log('promise 1');
  })
  .then(() => {
    console.log('promise 2');
  });

queueMicrotask(() => {
  console.log('microtask');
});

console.log('script end');

script start
script end
promise 1
microtask
promise 2
setTimeout

struct DelayTask {
  int64 id;
  CallBackFunction cbf;
  int start_time;
  int delay_time;
};

void MainThread() {
  for (;;) {
    Task task = task_queue.takeTask();
    ProcessTask(task);

    ProcessDelayTask();  // 处理到期的延迟任务

    if (!keep_running)
      break;
  }
}

static const int kMaxTimerNestingLevel = 5;
static constexpr base::TimeDelta kMinimumInterval =
    base::TimeDelta::FromMilliseconds(4);

// 方案一：箭头函数包装
setTimeout(() => obj.method(), 100);

// 方案二：bind 绑定
setTimeout(obj.method.bind(obj), 100);

function animate(timestamp) {
  // timestamp 为上一帧 rAF 回调执行到当前的时间差
  element.style.transform = `translateX(${timestamp * 0.1}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    performTask(tasks.pop());
  }
  if (tasks.length > 0) {
    requestIdleCallback(processRemainingTasks);
  }
});

   ┌───────────────────────────┐
┌─>│           timers          │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │           poll            │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │           check           │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │
   └───────────────────────────┘

setTimeout(() => {
  console.log('timer1');
  Promise.resolve().then(() => console.log('promise1'));
}, 0);

setTimeout(() => {
  console.log('timer2');
  Promise.resolve().then(() => console.log('promise2'));
}, 0);

// 浏览器中一定打印：timer1, promise1, timer2, promise2
// Node 中可能打印：timer1, timer2, promise1, promise2（取决于进入事件循环是否超过 1ms）

Promise.resolve().then(() => console.log('promise'));
process.nextTick(() => console.log('nextTick'));
// 输出：nextTick → promise

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2');
}

console.log('script start');
async1();
console.log('script end');

// script start → async1 start → async2 → script end → async1 end

console.log('start');
setTimeout(() => {
  console.log('setTimeout1');
  Promise.resolve().then(() => console.log('promise'));
}, 0);
setTimeout(() => {
  console.log('setTimeout2');
}, 0);
console.log('end');

// start → end → setTimeout1 → promise → setTimeout2

console.log('start');
Promise.resolve()
  .then(() => {
    console.log('promise1');
    Promise.resolve().then(() => console.log('promise2'));
  });
console.log('end');

// start → end → promise1 → promise2

// 基本用法
const response = await fetch('https://api.example.com/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ key: 'value' }),
});

if (!response.ok) {
  throw new Error(`HTTP ${response.status}: ${response.statusText}`);
}

const data = await response.json();

const controller = new AbortController();
const signal = controller.signal;

// 取消 Fetch 请求
fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已被取消');
    }
  });

// 5 秒后取消
setTimeout(() => controller.abort(), 5000);

async function cancellableDelay(ms, signal) {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(resolve, ms);

    signal.addEventListener('abort', () => {
      clearTimeout(timer);
      reject(new DOMException('操作已取消', 'AbortError'));
    }, { once: true });
  });
}

// Thenable 示例
const thenable = {
  then(resolve, reject) {
    resolve(42);
  }
};

const p = Promise.resolve(thenable);
// p 的状态由 thenable.then 的调用结果决定
// p 最终为 Fulfilled，值为 42

Promise.resolve()
  .then(() => { throw new Error('step 1 failed'); })
  .then(() => { console.log('不会执行'); })
  .then(() => { console.log('不会执行'); })
  .catch(err => { console.log(err.message); }); // "step 1 failed"

class Bromise {
  constructor(executor) {
    this.onResolve_ = null;
    this.onReject_ = null;

    const resolve = (value) => {
      // 使用微任务延迟执行，而非 setTimeout
      queueMicrotask(() => this.onResolve_(value));
    };

    const reject = (reason) => {
      queueMicrotask(() => this.onReject_(reason));
    };

    executor(resolve, reject);
  }

  then(onResolve, onReject) {
    this.onResolve_ = onResolve;
    this.onReject_ = onReject;
  }
}

// 传统模式
let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

// Promise.withResolvers()
const { promise, resolve, reject } = Promise.withResolvers();

// 使用场景：将回调式 API 转换为 Promise
function readStream(stream) {
  const { promise, resolve, reject } = Promise.withResolvers();
  const reader = stream.getReader();
  const chunks = [];

  function pump() {
    reader.read().then(({ done, value }) => {
      if (done) { resolve(chunks); return; }
      chunks.push(value);
      pump();
    }).catch(reject);
  }
  pump();
  return promise;
}

function* genDemo() {
  console.log('执行第一段');
  yield 'result 1';

  console.log('执行第二段');
  yield 'result 2';

  console.log('执行第三段');
  return 'done';
}

const gen = genDemo();
console.log(gen.next()); // { value: 'result 1', done: false }
console.log(gen.next()); // { value: 'result 2', done: false }
console.log(gen.next()); // { value: 'done', done: true }

async function foo() {
  return 2;
}
console.log(foo()); // Promise { <fulfilled>: 2 }

async function foo() {
  console.log(1);
  const a = await 100;
  console.log(a);
  console.log(2);
}

console.log(0);
foo();
console.log(3);

async function fetchData() {
  try {
    const response1 = await fetch('https://api.example.com/data1');
    const data1 = await response1.json();

    const response2 = await fetch('https://api.example.com/data2');
    const data2 = await response2.json();

    return { data1, data2 };
  } catch (error) {
    // 捕获任意 await 的 rejection 或同步异常
    console.error('请求失败:', error);
    throw error; // 可选择重新抛出
  }
}

// module.mjs（顶层 await 仅在 ES Module 中可用）
const config = await fetch('/config.json').then(r => r.json());
const db = await connectDatabase(config.dbUrl);

export { db };

// scheduler.postTask — 按优先级调度任务
const controller = new TaskController({ priority: 'user-blocking' });

scheduler.postTask(() => {
  // 高优先级任务：用户交互响应
  updateUI();
}, { priority: 'user-blocking', signal: controller.signal });

scheduler.postTask(() => {
  // 普通优先级任务：数据加载
  loadData();
}, { priority: 'user-visible' });

scheduler.postTask(() => {
  // 低优先级任务：日志上报
  sendAnalytics();
}, { priority: 'background' });

async function processLargeDataset(items) {
  for (const item of items) {
    processItem(item);
    // 每处理一项后让出主线程，保持页面响应性
    await scheduler.yield();
  }
}

const controller = new TaskController({ priority: 'user-visible' });

const taskId = scheduler.postTask(() => {
  performLongOperation();
}, { signal: controller.signal });

// 取消任务
controller.abort();

// 动态调整优先级
controller.setPriority('background');

// 自定义异步可迭代对象
class AsyncRange {
  constructor(start, end, delay) {
    this.start = start;
    this.end = end;
    this.delay = delay;
  }

  [Symbol.asyncIterator]() {
    let current = this.start;
    const end = this.end;
    const delay = this.delay;

    return {
      async next() {
        if (current <= end) {
          await new Promise(resolve => setTimeout(resolve, delay));
          return { value: current++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
}

// 使用 for await...of 消费
(async () => {
  for await (const num of new AsyncRange(1, 5, 1000)) {
    console.log(num); // 每秒输出 1, 2, 3, 4, 5
  }
})();

async function* fetchPages(baseUrl) {
  let page = 1;
  while (true) {
    const response = await fetch(`${baseUrl}?page=${page}`);
    const data = await response.json();

    if (data.length === 0) return;
    yield data;
    page++;
  }
}

// 消费异步生成器
for await (const page of fetchPages('https://api.example.com/items')) {
  for (const item of page) {
    render(item);
  }
}

async function readStream(url) {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();

  for await (const chunk of response.body) {
    const text = decoder.decode(chunk, { stream: true });
    processText(text);
  }
}

async function asyncTask() {
  console.log('asyncTask start');
  await Promise.resolve();
  console.log('asyncTask after await');
}

console.log('script start');

setTimeout(() => {
  console.log('setTimeout 1');

  Promise.resolve().then(() => {
    console.log('promise inside setTimeout');
  });
}, 0);

requestAnimationFrame(() => {
  console.log('rAF callback');
});

asyncTask();

new Promise((resolve) => {
  console.log('promise executor');
  resolve();
}).then(() => {
  console.log('promise then 1');
}).then(() => {
  console.log('promise then 2');
});

queueMicrotask(() => {
  console.log('microtask');
});

console.log('script end');

script start              ← 同步执行
asyncTask start           ← 同步执行（进入 async 函数）
promise executor          ← 同步执行（Promise executor 立即执行）
script end                ← 同步执行完毕

--- 微任务检查点 ---
promise then 1            ← 第一个 .then() 回调（微任务）
microtask                 ← queueMicrotask 回调（微任务）
asyncTask after await     ← await 恢复协程（微任务）
promise then 2            ← 第二个 .then() 回调（微任务，由第一个 .then 返回的 Promise 触发）

--- requestAnimationFrame ---
rAF callback              ← rAF 回调（渲染前）

--- 下一宏任务 ---
setTimeout 1              ← setTimeout 回调（宏任务）
promise inside setTimeout ← 宏任务内产生的微任务

const observer = new MutationObserver((mutations) => {
  // mutations 为自上次回调以来的所有变更记录
  mutations.forEach(mutation => {
    console.log('DOM 变更类型:', mutation.type);
  });
});

observer.observe(document.getElementById('container'), {
  childList: true,
  attributes: true,
  subtree: true,
});

console.log('1: 同步代码');

setTimeout(() => {
    console.log('2: 宏任务 setTimeout');
    Promise.resolve().then(() => {
        console.log('3: 微任务（在宏任务中）');
    });
}, 0);

Promise.resolve().then(() => {
    console.log('4: 微任务 Promise');
    Promise.resolve().then(() => {
        console.log('5: 微任务中的微任务');
    });
});

console.log('6: 同步代码');

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');  // 微任务
}
async function async2() { console.log('async2'); }

console.log('script start');
setTimeout(() => { console.log('setTimeout'); }, 0);
async1();
new Promise((resolve) => {
    console.log('promise1');
    resolve();
}).then(() => { console.log('promise2'); });
console.log('script end');

script start → async1 start → async2 → promise1 → script end
async1 end（微任务）→ promise2（微任务）→ setTimeout（宏任务）

// Vue 3 的 nextTick 实现（简化版）
const resolvedPromise = Promise.resolve();
let currentFlushPromise = null;

export function nextTick(fn) {
    const p = currentFlushPromise || resolvedPromise;
    return fn ? p.then(fn) : p;
}