如何从fetch异步请求返回数据并将JSON的title字段展示到div中

问题根因 #

• data.json()是异步方法，返回值为Promise，未加await会导致拿到的json变量是Promise实例，无法直接读取title字段
• 所有async函数的返回值本身就是Promise对象，直接将返回值赋值给DOM内容就会显示[object Promise]
• 你当前请求URL带callback=getJSONP参数，说明接口返回的是JSONP格式，不是标准JSON，直接用fetch+json()解析会抛出语法错误

修复方案 #

方案1：接口适配CORS，返回标准JSON（推荐） #

先要求后端去掉JSONP封装，配置接口支持跨域CORS，请求时去掉URL里的callback参数，代码调整如下：

// 直接在异步函数内操作DOM，无需处理返回值
async function buildWidget() {
    const id = "whatever";
    const res = await fetch(`getItem.php?id=${id}`);
    // 新增await等待JSON解析完成
    const json = await res.json();
    // 替换为你实际的DIV选择器即可
    document.querySelector('#target-div').textContent = json.title;
}

// 执行函数
buildWidget();

如果你需要拿到返回值后再做其他处理，调用时要通过.then获取异步结果：

async function buildWidget() {
    const id = "whatever";
    const res = await fetch(`getItem.php?id=${id}`);
    const json = await res.json();
    return json.title;
}

buildWidget().then(title => {
    document.querySelector('#target-div').textContent = title;
})

方案2：必须使用JSONP接口的情况 #

fetch本身不支持JSONP格式解析，需要手动实现JSONP逻辑：

function buildWidget() {
    const id = "whatever";
    const callbackName = "getJSONP";
    // 挂载全局回调函数，接口返回后会自动触发
    window[callbackName] = function(json) {
        document.querySelector('#target-div').textContent = json.title;
        // 用完清理全局变量和插入的标签，避免污染
        delete window[callbackName];
        document.body.removeChild(script);
    }
    // 创建script标签发起JSONP请求
    const script = document.createElement('script');
    script.src = `getItem.php?id=${id}&callback=${callbackName}`;
    document.body.appendChild(script);
}

buildWidget();

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