我正在探索导入/导出并偶然发现了这种奇怪的行为。
它看起来像将 Promise 函数导出为变量声明,自动将所有导入合并在一起,这样它就不会重新 Promise?
想象两种情况: 第一:
/* *** fetchMe.js *** */
/ *********************/
var fetchMe = fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(function (data) {
console.log("fromFetch", data);
return data.title
});
export default fetchMe
/* *** a.js *** */
/****************/
import fetchMe from "./fetchMe";
function a () {
console.log("from a");
fetchMe;
}
export default a
/* *** b.js *** */
/****************/
import fetchMe from "./fetchMe";
function b () {
console.log("from b");
fetchMe;
}
export default b
/* *** index.js *** */
/*******************/
import a from "./a";
import b from "./b";
a();
b();
// RESULTS //
// from a
// from b
// fromFetch <--- just once!
第二种情况:
/* *** fetchMe.js *** */
/*********************/
function fetchMe() { // ** <-- DIFFERENCE
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(function (data) {
console.log("fromFetch", data);
return data.title
});
}
export default fetchMe
/* *** a.js *** */
/***************/
import fetchMe from "./fetchMe";
function a () {
console.log("from a");
fetchMe(); // ** <-- DIFFERENCE
}
export default a
/* *** b.js *** */
/***************/
import fetchMe from "./fetchMe";
function b () {
console.log("from b");
fetchMe(); // ** <-- DIFFERENCE
}
export default b
/* *** index.js *** */
/*******************/
import a from "./a";
import b from "./b";
a();
b();
// RESULTS //
// from a
// from b
// fromFetch <--- not once!
// fromFetch <--- twice!?
两者之间的唯一区别是 fetchMe 被声明为函数而不是变量函数的片段。
JavaScript 是否只导入一次变量以节省调用量?
为什么在函数调用时调用两次,而用作变量时只调用一次?
最佳答案
一个模块仅被评估一次,其导出的变量本质上形成一个单例。它们由导入它们的所有模块共享。
在您的第一个示例中,有一个 promise 被使用(好吧,不是真的,引用)两次。
在第二个示例中,有一个函数被调用两次。
关于javascript - 根据函数的初始化方式,ES6 导入的行为有所不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54220719/