乐趣区

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

jiezi

咱们都晓得在异步编程中，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 生态带来更多好的货色

退出移动版