Cordova File Plugin文件读取函数调用返回undefined问题求助

看起来你遇到的是典型的异步操作时序问题——Cordova的File API全都是异步执行的，你的alert很可能在文件读取完成前就被触发了，所以拿到的是undefined；而console.log(this.result)是在文件读取成功的回调里，这时候数据已经准备好，所以能正常输出。

问题根源分析 #

从你给出的代码片段来看，你应该是在getFile的回调之外调用了alert，或者没有把alert放在FileReader的onload回调里。举个例子，错误的写法可能是这样的：

function pnrread(){
  let fileContent;
  window.resolveLocalFileSystemURL(cordova.file.externalCacheDirectory, function(fs) {
    fs.getFile("pnr.txt",{ create: false, exclusive: false }, function (fileEntry) {
      fileEntry.file(function(file) {
        let reader = new FileReader();
        reader.onload = function() {
          fileContent = this.result;
          console.log(this.result); // 这里能拿到内容
        };
        reader.readAsText(file);
      });
    });
  });
  alert(fileContent); // 这里异步还没完成，fileContent是undefined
}

修正方案：把alert放在异步回调的最内层 #

正确的做法是将alert（或者任何需要使用文件内容的操作）放在FileReader的onload回调里，确保只有当文件读取完成后才执行：

function pnrread(){
  window.resolveLocalFileSystemURL(cordova.file.externalCacheDirectory, function(fs) {
    fs.getFile("pnr.txt",{ create: false, exclusive: false }, function (fileEntry) {
      console.log("fileEntry is file?" + fileEntry.isFile);
      // 读取文件内容
      fileEntry.file(function(file) {
        let reader = new FileReader();
        reader.onload = function() {
          console.log(this.result); // 正常输出内容
          alert(this.result); // 现在能正确显示文件内容了！
        };
        // 以文本形式读取文件
        reader.readAsText(file);
      }, function(error) {
        console.error("获取文件对象失败:", error);
        alert("读取文件失败，请检查文件是否存在");
      });
    }, function(error) {
      console.error("获取文件条目失败:", error);
      alert("找不到pnr.txt文件");
    });
  }, function(error) {
    console.error("解析文件路径失败:", error);
    alert("无法访问存储目录");
  });
}

进阶优化：用Promise封装避免回调地狱 #

如果你的项目比较复杂，推荐用Promise封装异步操作，让代码更易读，也方便后续用async/await处理：

function resolveFileSystemUrl(url) {
  return new Promise((resolve, reject) => {
    window.resolveLocalFileSystemURL(url, resolve, reject);
  });
}

function getFileEntry(fs, fileName, options) {
  return new Promise((resolve, reject) => {
    fs.getFile(fileName, options, resolve, reject);
  });
}

function readFileContent(fileEntry) {
  return new Promise((resolve, reject) => {
    fileEntry.file(file => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result);
      reader.onerror = () => reject(reader.error);
      reader.readAsText(file);
    }, reject);
  });
}

// 调用示例
async function pnrread() {
  try {
    const fs = await resolveFileSystemUrl(cordova.file.externalCacheDirectory);
    const fileEntry = await getFileEntry(fs, "pnr.txt", { create: false, exclusive: false });
    const fileContent = await readFileContent(fileEntry);
    console.log(fileContent);
    alert(fileContent); // 这里能正确显示内容
  } catch (error) {
    console.error("读取文件出错:", error);
    alert("文件读取失败: " + error.message);
  }
}

关键提醒 #

异步操作的核心是不要在回调外等待异步结果，所有依赖异步数据的操作都必须放在对应的回调函数里，或者通过Promise/async/await的方式确保时序正确。这样就能避免出现alert拿到undefined的问题啦。

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