JavaScript调用util.js时异步代码执行顺序异常问题咨询

原因分析 #

这是JavaScript异步操作的典型表现，核心两点：

1. fetch 是异步非阻塞操作：JS引擎执行到fetch时，会发起网络请求，但不会暂停后续代码等待请求完成。所以console.log("before")、getDataFromTxt(textFile)调用、console.log("after")会先依次执行，等网络请求完成后，才会进入then回调处理文本、打印数组。
2. 原函数未返回异步结果：你的getDataFromTxt函数没有返回fetch生成的Promise，所以this.patrolArray会被赋值为undefined——因为函数默认返回undefined，而你需要的数组只存在于异步回调内部，根本没传递到外部。

修复方案 #

第一步：修改getDataFromTxt函数，返回Promise

让函数返回fetch的调用链，这样外部可以获取异步操作的结果：

function getDataFromTxt(fullFilePath) {
  const myRequest = new Request(fullFilePath);

  return fetch(myRequest)
      .then((response) => {
          if (!response.ok) {
              throw new Error(`HTTP error, status = ${response.status}`);
          }
          return response.text();
      })
      .then((text) => {
          // 兼容Windows(\r\n)和Linux(\n)的换行，同时过滤空行
          return text.split(/[\r\n]+/).filter(line => line.trim() !== '');
      })
      .catch((error) => {
          console.error('读取文件失败:', error);
          return `Error: ${error.message}`;
      });
}

第二步：正确处理异步结果

有两种常用方式：

方式1：使用.then链式调用

console.log("before");
getDataFromTxt(textFile).then(result => {
  this.patrolArray = result;
  console.log("after"); // 此时数组已获取，顺序符合预期
  console.log(this.patrolArray);
});

方式2：使用async/await（更接近同步逻辑）

注意await必须在async标记的函数内使用：

async function loadPatrolData() {
  console.log("before");
  this.patrolArray = await getDataFromTxt(textFile);
  console.log("after");
  console.log(this.patrolArray);
}

loadPatrolData();

内容的提问来源于stack exchange，提问作者Kyle