javascript - 根据函数的初始化方式，ES6 导入的行为有所不同

Question

我正在探索导入/导出并偶然发现了这种奇怪的行为。

它看起来像将 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 是否只导入一次变量以节省调用量？

为什么在函数调用时调用两次，而用作变量时只调用一次？

Answer 1

一个模块仅被评估一次，其导出的变量本质上形成一个单例。它们由导入它们的所有模块共享。

在您的第一个示例中，有一个 promise 被使用(好吧，不是真的，引用)两次。
在第二个示例中，有一个函数被调用两次。