Question

我有一个JS脚本来执行服务调用，该脚本可能会加载一些数据，然后将其放入localStorage。不幸的是，由于一些异步问题，当我尝试访问它时，我的localStorage为空。 JS不是我的主要语言，并且我对异步调用的工作方式没有深入的了解，因此我想从当前示例中学习。

执行请求的JS代码：

    function getRM() {
      var handleResponse = function (status, response) {
          localStorage.setItem('return_matrix', response);
      }
      var http=new XMLHttpRequest();
      var handleStateChange = function () {
           switch (http.readyState) {
              case 0 : case 1 : case 2 : case 3 : break;
              case 4 : // COMPLETED
                  handleResponse(http.status, http.responseText);
                  break;
              default: alert("error");
           }
      }
      http.onreadystatechange=handleStateChange;
      http.open("GET",'{% url 'returnMatrix'  %}', true);
      http.setRequestHeader('Content-type', 'application/json');
      http.setRequestHeader('X-CSRFToken', '{{  csrf_token }}');
      http.send(null);
    }

用于处理应用于window.onload的本地存储项目的JS代码：

    function createTableData() {
      if (localStorage.getItem('return_matrix') === null) {
          getRM()
      }
      var returnMatrix = JSON.parse(localStorage.getItem('return_matrix'));
      //...
      /*save data to locat storage*/
      returnMatrix['years'] = years; // here I get an error that returnMatrix is null
      returnMatrix["present_value"] = sum;
      returnMatrix["actual_contributions"] = actualContributions;
      localStorage.setItem('return_matrix', JSON.stringify(returnMatrix))
      //...
    }

Answer 1

在异步事件之后恢复代码的最简单方法是使用回调函数。看起来像这样：

function getRM(callback) { // <--- accepts a callback param
  const handleResponse = function (status, response) {
    localStorage.setItem('return_matrix', response);
    callback(); // <--- calling the callback
  })

  const http=new XMLHttpRequest();
  // ...etc
}

它会像这样被使用：

function createTableData() {
  if (localStorage.getItem('return_matrix') === null) {
    getRM(doWork);
  } else {
    doWork();
  }
}

// I split this out into a helper function because it sometimes needs to be
//   called synchronously, sometimes asynchronously, and i didn't want to
//   duplicate the code. 
function doWork() {
  const returnMatrix = JSON.parse(localStorage.getItem('return_matrix');
  //... etc
}

回调起作用，但是当您要将它们链接在一起或处理错误时，可能会有些麻烦。对此有所改进的另一种常用技术是Promises。承诺是代表最终价值的对象。您可以通过调用promise的.then方法并提供回调来访问该最终值。

许多用于执行http请求的库（例如axios，fetch）将返回诺言，因此您可以在不做任何额外操作的情况下使用它们。在您的示例中，虽然您手动执行了XHR，但没有内置Promise。但是您仍然可以根据需要添加它们，例如：

function getRM() {
  // creating a promise object
  return new Promise((resolve, reject) => {
    const handleResponse = function (status, response) {
      localStorage.setItem('return_matrix', response);
      resolve(); //<--- calling resolve instead of callback
    }

    const http = new XMLHttpRequest();
    // ...etc
  });
}

您将像这样使用它：

function createTableData() {
  if (localStorage.getItem('return_matrix') === null) {
    getRM().then(doWork);
  } else {
    doWork();
  }
}

现在，代码正在使用Promise，我们可以做的进一步改进是使用async / await，这是使用Promise的一种语法。该版本如下所示：

async function createTableData() {
  if (localStorage.getItem('return_matrix') === null) {
    await getRM();
  }

  // I've moved the code back in line, since it's no longer needed in 2 places
  const http=new XMLHttpRequest();
  //... etc
}

现在，它又回到了原来的样子，只是getRM现在返回了一个Promise，而createTableData将等待该Promise的解析。

异步调用解决方法

1 个答案: