JavaScript Fetch API请求取值存变量时出现undefined问题如何解决

问题原因 #

• fetch 是异步网络请求API，调用后会立刻返回，不会阻塞后续同步代码执行
• 你代码中给 setter 输入框赋值的语句是同步执行的，此时网络请求还没完成，then 回调里的 r = data[0] 还没运行，所以 r 仍然是初始的 undefined 值

解决方法 #

方法1：把赋值逻辑放到 then 回调内 #

直接把要用到请求返回值的逻辑放到异步回调里，保证拿到数据后再执行：

function submitValue() {
    fetch('http://localhost:8080/multimediaApi/api/multimedia/users')
        .then(response => response.json())
        .then(data => {
            const r = data[0];
            document.getElementById("setter").value = r;
        });
}

方法2：用 async/await 语法简化异步逻辑 #

这种写法更接近同步代码的阅读逻辑，不容易出错：

async function submitValue() {
    const response = await fetch('http://localhost:8080/multimediaApi/api/multimedia/users');
    const data = await response.json();
    const r = data[0];
    document.getElementById("setter").value = r;
}

额外提示：建议增加边界判断，避免接口返回空数组时仍然出现 undefined 的情况，比如判断 data.length > 0 再取 data[0]。

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