ES6模块化export异步导出数据

最新推荐文章于 2024-05-13 14:11:32 发布

原创最新推荐文章于 2024-05-13 14:11:32 发布 · 4.0k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #vue #es6

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

14 篇文章

订阅专栏

本文介绍了如何在ES6模块化中导出和导入异步数据，包括通过导出Promise对象和使用回调函数两种方式。在import.js中，分别展示了如何处理这两个异步数据源，确保在正确的时间获取到更新后的数据。作者建议使用回调函数，认为这种方式能更好地保持数据和逻辑的分离。

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调用，数据和逻辑分离更清晰。