34. JavaScript中的异步编程

function main() {
  try {
    const result = divideSync(12, 3); // (A)
    assert.equal(result, 4);
  } catch (err) {
    assert.fail(err);
  }
}

while (true) {
  const task = taskQueue.dequeue();
  task(); // run task
}

function main() {
  divideCallback(12, 3,
    (err, result) => {
      if (err) {
        assert.fail(err);
      } else {
        assert.equal(result, 4);
      }
    });
}

divideCallback(x, y, callback)

• divideCallback()向服务器发送请求
• 然后当前任务main()执行结束，其他任务可以执行
• 当来自服务器的响应到达时，它会是：
  • 一个错误err：会把以下任务添加到任务队列

    taskQueue.enqueue(() => callback(err));
    

  • 一个结果r：会把以下任务添加到任务队列

    taskQueue.enqueue(() => callback(null, r));
    

• 一个使回调工作更容易的标准模式
• 异步函数(下一小节的主题)所基于的机制。

function main() {
  dividePromise(12, 3)
    .then(result => assert.equal(result, 4))
    .catch(err => assert.fail(err));
}

async function main() {
  try {
    const result = await dividePromise(12, 3); // (A)
    assert.equal(result, 4);
  } catch (err) {
    assert.fail(err);
  }
}

• 在本章中，我们将看到同步函数调用是如何工作的。我们还将探讨JavaScript通过 事件循环 在单个进程中执行代码的方法。
• 本章还描述了通过回调实现的异步性。
• 下面的章节将涵盖Promises和async函数。
• 本系列关于异步编程的章节以关于异步迭代的章节结束，异步迭代与同步迭代相似，但是迭代后的值是异步交付的。

function h(z) {
  const error = new Error();
  console.log(error.stack);
}
function g(y) {
  h(y + 1);
}
function f(x) {
  g(x + 1);
}
f(3);
// done

• Line 12 (location in top-level scope)

• Line 10 (location in f())
• Line 12 (location in top-level scope)

• Line 7 (location in g())
• Line 10 (location in f())
• Line 12 (location in top-level scope)

Error: 
    at h (demos/async-js/stack_trace.mjs:2:17)
    at g (demos/async-js/stack_trace.mjs:6:3)
    at f (demos/async-js/stack_trace.mjs:9:3)
    at demos/async-js/stack_trace.mjs:11:1

• 任务源将任务添加到队列中。其中一些源代码同时运行到JavaScript进程。例如，一个任务源负责处理用户界面事件：如果用户单击某个地方，并且注册了一个单击侦听器，则将该侦听器的调用添加到任务队列中。
• 事件循环在JavaScript进程中持续运行。在每个循环迭代期间，它从队列中取出一个任务（如果队列是空的，它将等待，直到它不是空的）并执行它。当调用堆栈为空且有一个return时，则当前任务完成。控件返回到事件循环，然后事件循环从队列中检索下一个任务并执行它等等。

while (true) {
  const task = taskQueue.dequeue();
  task(); // run task
}

• 你可以在线运行
• 你可以使用练习在存储库中打开以下文件：demos/async-js/block.html

<a id="block" href="">Block</a>
<div id="statusMessage"></div>
<button>Click me!</button>

document.getElementById('block')
  .addEventListener('click', doBlock); // (A)
function doBlock(event) {
  // ···
  displayStatus('Blocking...');
  // ···
  sleep(5000); // (B)
  displayStatus('Done');
}
function sleep(milliseconds) {
  const start = Date.now();
  while ((Date.now() - start) < milliseconds);
}
function displayStatus(status) {
  document.getElementById('statusMessage')
    .textContent = status;
}

• 行A：当单击ID为block的HTML元素时，我们告诉浏览器调用doBlock()。
• doBlock()显示状态信息，然后调用sleep()将JavaScript进程阻塞5000毫秒(行B)。
• sleep()通过循环阻塞JavaScript进程，直到经过了足够的时间才停止。
• displayStatus()在ID为statusMessage的<div>中显示状态信息。

• 该操作可以异步 地交付其结果：有些操作(如下载)可以并发地执行到JavaScript进程。触发此类操作的JavaScript代码注册了一个回调，该回调在操作完成后使用结果调用。调用是通过任务队列处理的。这种交付结果的方式称为异步，因为调用者不会等到结果准备好了才进行调用。而普通函数调用会同步地交付它们的结果。
• 在单独的进程中执行长时间的计算：这可以通过所谓的Web workers来完成。Web workers是与主进程并行运行的重量级进程。它们中的每一个都有自己的运行时环境(全局变量等)。它们是完全孤立的，必须通过消息传递进行通信。更多信息请参考MDN web文档。
• 在长时间的计算中休息。下一小节将解释如何进行。

function setTimeout(callback: () => void, ms: number): any

function clearTimeout(handle?: any): void

setTimeout()让任务能够暂时停止

查看setTimeout()的另一种方法是，当前任务暂停，然后通过回调继续执行。

console.log('start');
setTimeout(() => {
  console.log('callback');
}, 0);
console.log('end');
// Output:
// 'start'
// 'end'
// 'callback'

• Events（事件）
• Callbacks（回调）
• Promises

• 它们用于异步地交付值。
• 执行零次或多次。
• 在这个模式中有三个角色：
  • 事件（对象）携带要传递的数据。
  • 事件监听器是一个通过参数接收事件的函数。
  • 事件源发送事件并允许您注册事件侦听器。

const openRequest = indexedDB.open('MyDatabase', 1); // (A)
openRequest.onsuccess = (event) => {
  const db = event.target.result;
  // ···
};
openRequest.onerror = (error) => {
  console.error(error);
};

• 每个操作都有一个用于创建请求对象的关联方法。例如，在第A行中，操作是“open”，方法是.open()，请求对象是openRequest。
• 操作的参数是通过请求对象提供的，而不是通过方法的参数提供的。例如，事件监听器（函数）存储在.onsuccess和.onerror属性中。
• 操作的调用通过方法（在第A行）添加到任务队列。也就是说，我们在将操作的调用添加到队列之后配置该操作。只有run-to-completion语义将我们从这里的竞争条件中拯救出来，并确保在当前代码片段完成后运行操作。

const xhr = new XMLHttpRequest(); // (A)
xhr.open('GET', 'http://example.com/textfile.txt'); // (B)
xhr.onload = () => { // (C)
  if (xhr.status == 200) {
    processData(xhr.responseText);
  } else {
    assert.fail(new Error(xhr.statusText));
  }
};
xhr.onerror = () => { // (D)
  assert.fail(new Error('Network error'));
};
xhr.send(); // (E)
function processData(str) {
  assert.equal(str, 'Content of textfile.txt\n');
}

• 指定要使用哪个HTTP请求方法（第B行）：GET、POST、PUT等。
• 注册一个侦听器（第C行），如果可以下载某些内容，它将收到通知。在侦听器内部，我们仍然需要确定下载是否包含我们请求的内容，或者是否通知我们有错误。注意，有些结果数据是通过请求对象xhr交付的。我不支持这种输入和输出数据混合在一起的方式。
• 注册侦听器（第D行），如果出现网络错误，侦听器将收到通知。

const element = document.getElementById('my-link'); // (A)
element.addEventListener('click', clickListener); // (B)
function clickListener(event) {
  event.preventDefault(); // (C)
  console.log(event.shiftKey); // (D)
}

readFile('some-file.txt', {encoding: 'utf8'},
  (error, data) => {
    if (error) {
      assert.fail(error);
      return;
    }
    assert.equal(data, 'The content of some-file.txt\n');
  });

练习：基于回调的代码

下面的练习使用异步代码的测试，这与同步代码的测试不同。更多信息请参考有关 mocha中异步测试的部分（在测试章节中）。

• 从同步代码到基于回调的代码：exercises/async-js/read_file_cb_exrc.mjs
• 给.map实现一个基于回调的版本：exercises/async-js/map_cb_test.mjs

• 异步代码比同步代码更冗长。
• 如果您调用异步代码，那么您的代码也必须成为异步的。这是因为您不能同步地等待异步结果。异步代码具有传染性。

• “Help, I’m stuck in an event-loop” by Philip Roberts (video).
• “Event loops”, section in HTML5 spec.