javascript - 当找不到使用 XMLHttpRequest() 的文件时如何停止 while 循环？

Question

我想遍历本地文件并从中获取信息。 map1.txt map2.txt ...

然而，当文件不存在时，代码不会停止。 rawFile.status 返回 404，控制台说它在 rawFile.send(null) 行。它只是不断地进行循环，永无止境并给出相同的错误。

我希望它在文件不存在时停止发出请求。

i = 0;
  while (i != -1) {
    (function(i) {
      var rawFile = new XMLHttpRequest();
      rawFile.open("GET", "../maps/map" + [i] + ".txt", false);
      rawFile.onreadystatechange = function() {
        if (rawFile.status == 404) {
          break; //(or i = -1;)
        }
        if (rawFile.readyState === 4) {
          if (rawFile.status === 200 || rawFile.status == 0) {
           //do stuff
          }
        }
      };
      rawFile.send(null);
    })(i);
    i++;
  }

Answer 1

onreadystatechange 将被异步调用。在安排下一个请求之前，您需要等待请求完成。

方案一:回调

你可以通过给你的函数一个回调来处理这个问题，一旦请求完成它就可以调用这个回调(就像 nodejs 对其所有异步 API 所做的那样)。通常，回调将具有 function(error, result) {} 签名 - 如果函数遇到错误，第一个是错误对象，如果没有，则为 null，第二个是异步操作的结果。

回调示例:

function getFile(i, cb) {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "../maps/map" + [i] + ".txt", false);
  rawFile.onreadystatechange = function() {
    if (rawFile.status == 404) {
      cb(new Error("It's dead Jim!"), null);
    }
    if (rawFile.readyState === 4) {
      if (rawFile.status === 200 || rawFile.status == 0) {
        //do stuff
        cb(null, "RESULT");
      }
    }
  };
  rawFile.send(null);
}

function doUntilNotFound(i = 0) {
  getFile(i, (error, result) => {
    if(error) {
      // handle error
    } else {
      // do something with result
      doUntilNotFound(i + 1);
    }
  });
}

doUntilNotFound();

然而，经过几次嵌套后，回调可能会变得非常难看 - 通常称为 callback hell .

解决方案 2: promise

更新、更现代的异步处理方式是 async / await和 Promises这将使您的代码更易于理解:

function getFile(i) {
  return new Promise((resolve, reject) => {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", "../maps/map" + [i] + ".txt", false);
    rawFile.onreadystatechange = function() {
      if (rawFile.status == 404) {
        reject(new Error("File not found"));
      }
      if (rawFile.readyState === 4) {
        if (rawFile.status === 200 || rawFile.status == 0) {
          //do stuff
          resolve("RESULT");
        }
      }
    };
    rawFile.send(null);
  });
}

async function downloadFiles() {
  try {
    for(let i = 0;; i++) {
      let result = await getFile(i);
    }
  } catch(e) {
    // handle file not found here
  }
}

downloadFiles();

解决方案 3:使用 Promises + fetch

你也可以使用 fetch而不是 XMLHttpRequest 如果您已经在使用 Promises:

async function downloadFiles() {
  try {
    for(let i = 0;; i++) {
      const req = await fetch("../maps/map" + [i] + ".txt");
      const reader = req.body.getReader();
      // TODO: Read Response body, do something with it
    }
  } catch(e) {
    // handle file not found here
  }
}

downloadFiles();

这将使您的代码更短更简单:)