JavaScript 中的异步编程方式与实践

2.2 Promise

// Promise：示例一
fs.promises.readFile('./a.txt', 'utf8')
  .then(a => fs.promises.readFile('./b.txt', 'utf8').then(b => a + b))
  .then(result => console.log(result));
  .catch (err => {console.log(err));

// Promise：封装示例
function readFile(path) {
  return new Promise((resolve, reject) => {
    fs.readFile(path, (err, data) => err ? reject(err) : resolve(data));
  });
}

readFile('./a.txt')
  .then(a => readFile('./b.txt').then(b => a + b))
  .then(result => console.log(result))
  .catch(err => console.error(err));

2.3 async + await

try {
  const a = await fs.promises.readFile('./a.txt', 'utf8');
  const b = await fs.promises.readFile('./b.txt', 'utf8');
  const result = a + b;
  console.log(result);
} catch (err) {
  console.log(err);
}

2.4 事件监听与处理

const uid = uuid.v4();
const payload = {...};
workerChannel.postMessage({ uid, payload });
workerChannel.once(uid, (result) => console.log(result));

3.1 延迟处理

// delay 封装：callback 模式
function delay(timeout = 0, callback: () => void) {
  setTimeout(() => callback(), timeout);
}

// delay 封装：Promise 模式
function delay(timeout = 0) {
  return new Promise(resolve => setTimeou(() => resolve(), timeout));
}

await delay(3_00).then(() => callback());
callback();

// sleep 封装：TS 类型、回调值支持
export const sleep = <T>(timeout = 0, value?: T | (() => T | Promise<T>)): Promise<T> =>
    new Promise(resolve => setTimeout(() => resolve(), timeout))
      .then(() => typeof value === 'function' ? value() : value);

await sleep(3_000, 1);

3.2 事件监听与订阅的 Promise 化

function request(payload) {
  return new Promise(resolve => {
    const uid = uuid.v4();
    workerChannel.postMessage({ uid, payload });
    workerChannel.once(uid, (result) => resolve(result));
  });
}

request({...}).then(body => console.log(body));

问：如何实现超时处理？

setTimeout 与超时处理

function request(payload, timeout = 5_000) {
  return new Promise(resolve => {
    const uid = uuid.v4();
    const timer = setTimeout(() => resolve({ errmsg: 'timeout' }), timeout);
    workerChannel.once(uid, (result) => {
      clearTimeout(timer);
      resolve(result);
    });
    workerChannel.postMessage({ uid, payload });
  });
}

request({...}).then(body => console.log(body));

问：如何实现超时处理的通用性封装？

超时处理的通用性封装：raceTimeout

export function raceTimeout<T>(promise: Promise<T>, timeout: number, onTimeout?: () => T | undefined): Promise<T | undefined> {
    let timer: NodeJS.Timer;

    return Promise.race([
        promise.finally(() => clearTimeout(timer)),
        new Promise<T | undefined>(resolve => {
            timer = setTimeout(() => resolve(onTimeout?.()), timeout);
        }),
    ]);
}

超时处理的通用性封装：raceTimeout - 示例

// 通过 `raceTimeout` 调用 `request` 处理超时：
raceTimeout(request({...}), 3_000, () => ({ errmsg: 'timeout' }))
  .then(body => console.log(body));

// 使用 `raceTimeout` 封装通用超时处理：
function request(payload, timeout = 5_000) {
  const p = new Promise(resolve => {
    const uid = uuid.v4();
    workerChannel.postMessage({ uid, payload });
    workerChannel.once(uid, (result) => resolve(result));
  });
  return raceTimeout(p, timeout, () => ({ errmsg: 'timeout' }));
}

request({...}).then(body => console.log(body));

超时处理的通用性封装：timeoutDeferred

interface IScheduledLater extends IDisposable {
    isTriggered(): boolean;
}
function timeoutDeferred(timeout: number, fn: () => void): IScheduledLater {
    let scheduled = true;
    const handle = setTimeout(() => {
        scheduled = false;
        fn();
    }, timeout);
    return {
        isTriggered: () => scheduled,
        dispose: () => {
            clearTimeout(handle);
            scheduled = false;
        },
    };
}

使用 timeoutDeferred 封装通用超时处理 - 示例：

function request(payload, timeout = 5_000) {
  const p = new Promise(resolve => {
    const uid = uuid.v4();
    const deferred = timeoutDeferred(timeout, resolve({ errmsg: 'timeout' }));
    workerChannel.postMessage({ uid, payload });
    workerChannel.once(uid, (result) => {
      deferred.dispose();
      resolve(result);
    });
  });
}

request({...}).then(body => console.log(body));

• 简单的使用并不比直接使用 setTimeout 简洁
• timeoutDeferred 更便利的用处是在复杂逻辑流程中，基于不同的变量因子决定如何执行 deferred.dispose()