关于前端:我们是否需要开始使用-toplevel-await

咱们都晓得在异步编程中， await 只能在aysnc function里进行应用。await 晋升了异步编程的体验，使咱们能像同步函数那样解决异步函数。在新的ES规范里，咱们发现了一个提议，在顶层作用域里应用await, 它使得ES module 像aysnc function一样，awit 异步资源，同时在import 引入它的文件中进行阻塞操作。换句话说，通过import引入须要异步获取的资源。

在引入top-level await之前，咱们是怎么操作的呢

请看一下例子：
library.js

//------ library.js ------export const sqrt = Math.sqrt;export function square(x) {    return x * x;}export function diagonal(x, y) {    return sqrt(square(x) + square(y));}//------ middleware.js ------import { square, diagonal } from './library.js';console.log('From Middleware');let squareOutput;let diagonalOutput;// IIFE (async () => {     await delay(1000);     squareOutput = square(13);     diagonalOutput = diagonal(12, 5); })();function delay(delayInms) {  return new Promise(resolve => {    setTimeout(() => {      resolve(console.log('❤️'));    }, delayInms);  });}export {squareOutput,diagonalOutput};

在这里，delay函数只是模仿异步操作，在理论中可能是网络申请，或其余可能的异步操作。以上程序很好了解，然而在文件引入的时候，会存在一些问题。

//------ main.js ------import { squareOutput, diagonalOutput } from './middleware.js';console.log(squareOutput); // undefinedconsole.log(diagonalOutput); // undefinedconsole.log('From Main');setTimeout(() => console.log(squareOutput), 2000);//169setTimeout(() => console.log(diagonalOutput), 2000);//13

运行下面的代码，squareOutput, diagonalOutput在初始状态是没有定义的，期待一会儿后又能取到值了。这是因为ES Moudle是在编译的时候就确定好了依赖关系，此时squareOutput, diagonalOutput都是undefine. 和commonjs不同引入的是对象拷贝不同es moudle是对象的援用。当middleware.js 里squareOutput, diagonalOutput被赋值后，main.js 里也同样能够获取这个援用值。
为了解决上述问题，通常采取一下计划：

1. Export Promise 来代替初始化

咱们对middleware革新如下：

//------ middleware.js ------import { square, diagonal } from './library.js';console.log('From Middleware');let squareOutput;let diagonalOutput;//WORKAROUNDexport default (async () => {    await delay(1000);    squareOutput = square(13);    diagonalOutput = diagonal(12, 5);})();function delay(delayInms) {  return new Promise(resolve => {    setTimeout(() => {      resolve(console.log('❤️'));    }, delayInms);  });}export {squareOutput,diagonalOutput};

async 返回的总是一个promise.

再看看如何引入这个文件

//------ main.js ------import promise, { squareOutput, diagonalOutput } from './middleware.js';promise.then(()=>{     console.log(squareOutput); // 169     console.log(diagonalOutput); // 13     console.log('From Main');     setTimeout(() => console.log(squareOutput), 2000);// 169     setTimeout(() => console.log(diagonalOutput), 2000);// 13})

以上计划尽管解决了咱们的问题，然而也存在有余的中央

所有须要引入middleware.js的文件，都须要写同样的promise构造，非常不不便
如果有其余文件依赖main.js里的 squareOutput, diagonalOutput，须要从新独自书写相似的导出模式

2. 同时咱们也采取一个相似的构造

import { square, diagonal } from './library.js';console.log('From Middleware');let squareOutput;let diagonalOutput;export default (async () => {    await delay(1000);    squareOutput = square(13);    diagonalOutput = diagonal(12, 5);    return {squareOutput,diagonalOutput};})();function delay(delayInms) {  return new Promise(resolve => {    setTimeout(() => {      resolve(console.log('❤️'));    }, delayInms);  });}//------ main.js ------import promise from './middleware.js';promise.then(({squareOutput,diagonalOutput})=>{    console.log(squareOutput); // 169    console.log(diagonalOutput); // 13    console.log('From Main');    setTimeout(() => console.log(squareOutput), 2000);// 169    setTimeout(() => console.log(diagonalOutput), 2000);// 13})

上述代码构造类似，不同之处在于promise的解决，然而实质上是同一个原理

top-level await如何解决以上问题

//------ middleware.js ------import { square, diagonal } from './library.js';console.log('From Middleware');let squareOutput;let diagonalOutput;await delay(1000);squareOutput = square(13);diagonalOutput = diagonal(12, 5);function delay(delayInms) {  return new Promise(resolve => {    setTimeout(() => {      resolve(console.log('❤️'));    }, delayInms);  });}export {squareOutput,diagonalOutput};//------ main.js ------import { squareOutput, diagonalOutput } from './middleware.js';console.log(squareOutput); // 169console.log(diagonalOutput); // 13console.log('From Main');setTimeout(() => console.log(squareOutput), 2000);// 169setTimeout(() => console.log(diagonalOutput), 2000); // 13

在main.js里，代码会期待middleware.js的await 状态resolved

用例

1. 动静引入资源

const strings = await import(`/i18n/${navigator.language}`);

2. 资源初始化

const connection = await dbConnector();

3. 依赖引入回调

let jQuery;try {  jQuery = await import('https://cdn-a.example.com/jQuery');} catch {  jQuery = await import('https://cdn-b.example.com/jQuery');}

结尾

top-level await 的确在某些特定情境下，有很不便的作用。这也是ES一直进化欠缺的同时带来的新体验。目前这一个性还没有很好的使用到生产代码里，然而置信不久的未来，ES的新个性会给js生态带来更多好的货色