Question

我正在探索进出口，偶然发现了这种奇怪的行为。

好像将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（嗯，不是真的，被引用）。
在第二个示例中，有一个函数被调用了两次。

根据功能的初始化方式，ES6导入的行为有所不同

1 个答案: