异步调用解决方法

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是表示最终值的对象。您可以通过调用promise的.then方法并提供回调来访问该最终值。

许多用于执行http请求的库（例如，axios，fetch）将返回一个promise，因此您可以使用它们而无需执行任何额外操作。在您的示例中虽然您手动执行了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();
  }
}

---

现在代码正在使用promises，我们可以做的另一个改进是使用async / await，这是一种更容易处理promises的语法。那个版本看起来像这样：

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的解析。