ES6模块如何export异步操作结果

组织ES6模块的时候,一般情况下我们export一些基本类型的变量,复合类型的对象或者函数等等。但有时模块内的代码也会出现异步操作,我们希望模块可以把异步操作的结果export出来供另一个模块调用。这种情况下应该怎么写呢?本文列举两种方法供参考。

利用Promise对象

export导出的变量类型可以是任意的Javascript对象,那么我们可以利用Promise对象帮助我们代理异步操作,将Promise对象导出,在导入Promise的地方添加成功/失败的回调即可。

a.js

import {AsyncStorage} from 'react-native';
export async function getVariable() {
    let variable = await AsyncStorage.getItem("variable");
    return variable;
}

b.js

import {getVariable} from 'a.js';
getVariable().then(v=>{
    //在这里获得模块a真正想导出的值
}).catch(e=>{})

a文件中使用了ES7的async函数,async函数一旦执行会立即返回一个Promise对象,等待所有await后的异步操作结束后改变Promise的状态。如果不使用async await,a文件也可以这样写:

import {AsyncStorage} from 'react-native';
export function getVariable() {
    return new Promise((resolve, reject)=>{
        AsyncStorage.getItem("variable").then(v=>{
            resolve(v);
        }).catch(e=>{
            reject(e);
        })
    })
}

直接导出异步结果

a.js

import {AsyncStorage} from 'react-native';
export var variable;

AsyncStorage.getItem("variable").then(v=>{
    variable = v;  //在回调函数中修改导出变量variable
}).catch(e=>{});

b.js

import {variable} from 'a.js';

console.log(variable);   //undefined

setTimeout(()=>{
    console.log(variable);   //异步操作所获得的值
}, 1000)

需要注意的是,当采用这种方式时,要注意导出变量会发生变化,在引用模块中要特别注意,否则突变的值会对程序造成莫名的bug。

说明

能够使用上述两种方式导出异步操作的结果,原因就在于,ES6的模块与CommonJS是不同的。

CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。

阮一峰的ES6入门有如下详细的说明:

CommonJS 模块输出的是值的拷贝,也就是说,一旦输出一个值,模块内部的变化就影响不到这个值。
ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候,遇到模块加载命令import,就会生成一个只读引用。等到脚本真正执行时,再根据这个只读引用,到被加载的那个模块里面去取值。换句话说,ES6 的import有点像 Unix 系统的“符号连接”,原始值变了,import加载的值也会跟着变。因此,ES6 模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 以下内容是我在学习和研究ES6时,对ES6的特性、重点和注意事项的提取、精练和总结,可以做为ES6特性的字典;在本...
    科研者阅读 3,181评论 2 9
  • 官方中文版原文链接 感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大...
    HetfieldJoe阅读 3,672评论 2 27
  • 异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本...
    呼呼哥阅读 7,343评论 5 22
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,637评论 0 106
  • 我是山西人,山西的面食种类比较多,但我最爱吃的就是母亲亲手擀的面条。 曾记得上初中的我,当时食量惊人。中午放学回家...
    游向岸边的美人鱼若雨阅读 393评论 0 1