2021-03-12 ES6模块化export异步导出数据

ES6模块化export异步导出数据，实现的方式。
当我们尝试在js中使用export导出异步的数据时，会发现输出的是异步前的结果。

//export.js
let asyData = [1, 2, 3]
setTimeout(function () {
        asyData = [3, 2, 1]
    }, 2000);
export { asyData }

//import.js
import { asyData } from "./export.js";
console.log( asyData ) //[1,2,3]

如果想要导出一些异步的数据，介绍两种方式。

1.导出Promise对象

//export.js
let asyData = [1, 2, 3]
let Pm = new Promise(function (resolve, reject) {
    setTimeout(function () {
        asyData = [3, 2, 1]
        resolve( asyData )
    }, 2000);
})
export { Pm }

//import.js
import { Pm } from "./export.js";
Pm.then((res) => {
  console.log(res); // [3,2,1]
});

2.导出回调函数，在回调中拿到数据

//export.js
let asyData = [1, 2, 3]
 let fn = (callback) => {
     setTimeout(() => {
         asyData = [3, 2, 1]
         callback(asyData )
     }, 1000);
 }
 export { fn }

//import.js
import { fn } from "./export.js";
fn((asyData) => {
  console.log(asyData); //[3,2,1]
});

小结：我觉得常用的是导出回调函数在另外的js调用，数据和逻辑分离更清晰。