我们都知道在异步编程中， 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
})
以上方案虽然解决了我们的问题，但是也存在不足的地方
- 所有需要引入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); // 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生态带来更多好的东西
