Uncaught (in promise) TypeError: response is undefined using Fetch API

Question

我正在尝试发出 POST 请求并打印响应。我的代码：

async function create_invite(){
    console.log("creating.....")
    const response = await fetch('https://localhost:8080/webhooks', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload)
    }).catch(error => console.log(error))
    console.log(response.json())
}

document.getElementById('create_invite').addEventListener("click", create_invite)

但我得到了这个错误

Uncaught (in promise) TypeError: response is undefined

我尝试在标题中添加 cors 但仍然不起作用

Answer 1

不要将await与.then和.catch混用，容易混淆。您的await 正在申请来自.catch 的承诺，不是来自fetch 的承诺。看起来fetch 失败了，触发了catch，它将拒绝转换为undefined 的履行。您需要查看fetch 失败的原因，但更新代码仍然很重要。

还有一些其他问题：在调用response.json 之前，请务必检查 HTTP 操作是否成功（fetch 仅在 network 错误时拒绝，而不是 HTTP 错误； API 枪）。此外，您的代码试图直接console.log response.json 的结果，这是一个承诺；取而代之的是await，这样您就可以在读取和解析数据后看到它。

综合起来：

async function create_invite() {
    console.log("creating.....")
    try {
        const response = await fetch('https://localhost:8080/webhooks', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(payload),
        });
        if (!response.ok) {
            throw new Error(`HTTP error ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

但是，我强烈建议您不要在那里捕捉错误，除非那是顶级入口点（事件处理程序等）。最好让它们传播给调用者（直到顶级入口点）。