javascript - 获取 API - 它是阻塞代码还是非阻塞代码？

Question

这几天我一直在研究 Fetch API。

在学习过程中，我遇到了声明“使用 fetch() 不会阻止您的 DOM”，因为它使用了 promises。

愉快地继续学习这些教程并查看一些新教程，我​​看到一个人在演示中说“使用 fetch() 会阻止您的 DOM”。

谁能教我这是两者中的哪一个？

Answer 1

在阻塞/非阻塞代码的意义上使用 fetch 归结为同步代码和异步代码之间的区别。

JavaScript 的设计范式之一称为 Run to Completion归结为当前正在执行的一段JS代码不能被另一段代码打断。换句话说，一个函数以同步方式运行直到它完成(另请参阅最后的警告)。

当你有异步代码时，比如包裹在 promise 中的代码(fetch 正在使用的代码)，它会被安排在所有同步代码运行完毕后稍后运行，以及所有其他先前计划的任务之后(microtasks 用于 promise )。

这提供了一个时间间隙，允许运行 JS 的系统的其他部分，例如浏览器中的 DOM，可以自由地操作它们与 JavaScript 引擎共享的系统部分，知道 JS 不会'不要妨碍他们。

因此，从广义上讲，fetch 是非阻塞的，不会阻塞 DOM。

应该注意的是，promises 表示通过异步调度链 (the promise chain) 连接的同步代码块，因此从技术上讲，fetch 的某些部分确实会阻塞 DOM，但可以考虑整个过程大多数情况下是非阻塞的。参见 the answer by mpen举个例子。

---

注意:在 ES6 中引入生成器后，函数不再是 JavaScript 中的原子执行单元。通过 yield 和之后的 await，JS 函数能够分解为多个同步执行代码的异步 block 。