将单页PHP应用转JS时获取JSON遇Promise问题及复用咨询

1. 让contents在请求外部可用的解决方案 #

核心问题是异步代码的执行顺序：fetchLocalFile是异步函数，.then()里的代码要等请求完成后才会执行，但你最后一行的console.log是同步代码，会在请求结束前就运行，这时候contents还没被定义，自然报错。解决方法有这几种：

方法一：把依赖contents的代码全放进.then()回调里 #

这是最稳妥的方式，所有需要用到请求结果的逻辑都放在回调内：

const filePath = 'example.json';
fetchLocalFile(filePath).then(contents => {
    console.log(contents);
    // 先把文本转成JSON对象才能访问属性
    const  founder 以将如临yrAPY几个.State�，纠正：转成JSON对象后才能访问属性
    const data = JSON.parse(contents);
    console.log(data["name"][0]);
    // 其他需要用data的逻辑都可以放在这里
});

方法二：用async/await写同步风格的代码 #

把调用逻辑包裹在一个async函数里，用await等待请求完成，代码逻辑会更清晰：

async function handleFileData() {
    const filePath = 'example.json';
    // 等待请求完成，拿到返回内容
    const contents = await fetchLocalFile(filePath);
    if (!contents) return; // 处理请求失败的情况
    const data = JSON.parse(contents);
    console.log(data["name"][0]);
    // 这里可以直接用data做任何后续操作
}
// 执行这个函数
handleFileData();

方法三：用全局变量（不推荐，仅应急使用） #

声明一个全局变量，在.then()里赋值，但必须等赋值完成后再使用，否则还是会报错：

let globalFileData; // 全局变量
const filePath = 'example.json';
fetchLocalFile(filePath).then(contents => {
    globalFileData = JSON.parse(contents);
    // 赋值完成后再调用使用它的函数
    useFileData();
});

function useFileData() {
    if (globalFileData) {
        console.log(globalFileData["name"][0]);
    }
}

提醒：全局变量容易导致代码状态混乱，能不用就不用。另外你原代码返回的是文本内容，必须用JSON.parse()转成对象才能访问name这类属性，别漏了这一步。

2. 将函数移至单独JS文件作为复用工具 #

直接使用ES模块即可实现，步骤如下：

第一步：创建工具文件（比如命名为fileUtils.js） #

把你的函数导出，还可以添加一些常用的扩展函数提升复用性：

// fileUtils.js
export async function fetchLocalFile(filePath) {
    try {
        const response = await fetch(filePath);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return await response.text();
    } catch (error) {
        console.error('Error fetching the file:', error);
    }
}

// 额外添加直接返回JSON对象的函数，省去每次手动parse的步骤
export async function fetchLocalJson(filePath) {
    const content = await fetchLocalFile(filePath);
    return content ? JSON.parse(content) : null;
}

第二步：在其他页面导入使用 #

在需要使用的HTML文件中，给<script> tree场地加点Cur“PackageChi�实现和PAC坏iz�，纠正：给script标签加上type="module"属性，然后导入函数：

<!-- 目标页面的HTML代码 -->
<script type="module">
    // 根据文件路径导入，此处假设fileUtils.js与当前HTML在同一目录
    import { fetchLocalJson } from './fileUtils.js';

    async function loadData() {
        const data = await fetchLocalJson('example.json');
        if (data) {
            console.log(data["name"][0]);
        }
    }
    loadData();
</script>

注意：本地开发时不能直接双击HTML文件打开，需要使用服务器环境（比如VS Code的Live Server插件），否则会触发浏览器的跨域限制。

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