关于前端:我们是否需要开始使用-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); // undefined
console.log(diagonalOutput); // undefined
console.log('From Main');
setTimeout(() => console.log(squareOutput), 2000);
//169
setTimeout(() => 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;

//WORKAROUND
export 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
})

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

1. 所有须要引入middleware.js的文件，都须要写同样的promise构造，非常不不便
2. 如果有其余文件依赖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); // 169
console.log(diagonalOutput); // 13
console.log('From Main');

setTimeout(() => console.log(squareOutput), 2000);// 169

setTimeout(() => 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生态带来更多好的货色