如何在异步/等待中处理404错误？

Question

从Postcode io API提取邮政编码时，我尝试了以下错误处理代码：

async getCoord() {
    const postcodeAPI = `http://api.postcodes.io/postcodes/dt12pbbbbbbbbb`;
    let response;
    try {
        response = await fetch(postcodeAPI);
    }
    catch (e) {
        console.log(e);
    };
};

由于邮政编码无效，fetch方法返回404错误。以我的理解，应该尝试并跳过try块，并且应该通过catch方法捕获错误，但是相反，我在控制台中收到了这个红色404错误： 发生在try块中，与代码中没有错误处理相同。为什么会这样？是否因为这是浏览器的默认行为？有没有办法改善错误处理？

编辑 我想要的是红色控制台错误消失并显示我自己的错误信息，但控制台错误似乎不可避免。

Answer 1

Fetch API不会在任何状态代码上引发错误。它只会在网络故障（即无法完成请求本身）时引发错误。

您可以使用response.ok来检查请求是否以2XX状态码完成。

async getCoord() {
    const postcodeAPI = `http://api.postcodes.io/postcodes/dt12pbbbbbbbbb`;
    let response;
    try {
        response = await fetch(postcodeAPI);

        if (!response.ok) throw new Error('Request failed.');
    }
    catch (e) {
        console.log(e);
    };
};

如果需要，您还可以显式检查状态码：

if (response.status === 404) {
    // handle 404
}

关于您在控制台中记录404错误的问题，没有办法或不需要来避免。每当您提出请求时，都会将其记录在开发工具中。但是开发人员工具就是所谓的-开发人员工具。您可以放心地假设您的用户不会看到那里，即使有人看到了，404也不是世界末日。