javascript - 在Javascript中的 promise 链中设置变量的值

Question

在我的 Web 应用程序中，有几个组件需要访问相同的数据(JSON 格式)。为了避免进行不必要的 REST 调用，我制作了一个模块，该模块应该发出获取请求并将结果存储在一个变量中。在后续请求中...如果数据在模块中可用，将直接返回(因此只需要一次网络请求)。

例如:

var data_module = function(){

  var data; //Module stores the json data in a variable

  return{ //Returns an object that contains a public method accessible to external functions
     get_json:function(){
       if(data){ //If data already exists, then return a Promise object that immediately resolves with data
        return Promise.resolve(data); 
       }
       else{ //Else if data does not exist, make fetch request 
          fetch('/rest/url/endpoint', {credentials:'include'})
          .then(function(response){
              if(!response.ok){
                throw new Error(response.statusText);
              }
              return response.json(); //Returns json of response
          })
          .then(function(json){
             data = json; //Assigns data the value of json to store the result for subsequent requests
             return Promise.resolve(data) //Returns a Promise that resolves with data

          });


      }
     } //Public method that is supposed to provide access to data

  } 




}(); //Module will automatically execute

在模块之外，我将尝试像这样访问数据:

some_dom_element.onclick = function(){ //Some html element is clicked and we need the data

   data_module.get_json().then(function(json){
      console.log(json); //However this never gets called 
  });

}

它不起作用。即使 data_module 的 get_json 函数返回一个 Promise，.then 方法也不会在 data_module 之外被调用。我想知道是否有人可以解释为什么会这样？ (或者提供一个大概的方向，如何修改解决方案，达到存储fetch请求的json结果的目的)。

提前致谢!

Answer 1

你需要返回fetch

var data_module = (function() {
  var data; //Module stores the json data in a variable

  return { //Returns an object that contains a public method accessible to external functions
    get_json: function() {
      if (data) { //If data already exists, then return a Promise object that immediately resolves with data
        console.log("** From CACHE **")
        return Promise.resolve(data);
      } else { //Else if data does not exist, make fetch request 
      // returning the fetch 
     return fetch('https://jsonplaceholder.typicode.com/posts/1', {
            credentials: 'include'
          })
          .then(function(response) {
            if (!response.ok) {
              throw new Error(response.statusText);
            }
            return response.json(); //Returns json of response
          })
          .then(function(json) {
            data = json;
            return Promise.resolve(data) //Returns a Promise that resolves with data

          });


      }
    } //Public method that is supposed to provide access to data

  }
}()); //Module will automatically execute
//Outside of the module, I will try to access data like so:
var some_dom_element = document.getElementById("testBt")
some_dom_element.onclick = function() { //Some html element is clicked and we need the data

  data_module.get_json().then(function(json) {
    console.log(json); //However this never gets called 
  });

}

<button id="testBt">Test</button>