javascript fetch无法捕获404错误

Question

我有一个使用抓取功能从第三方API检索信息的应用程序。 我正在通过cors-anywhere-herokuapp.com调用API。 当我使用有效数据调用API时，我能够检索API响应并提取需要提取的数据。 当我使用无效数据调用API时，API返回404服务器错误。 我强制使用无效数据，因此可以编写代码来捕获这种情况。 我的问题似乎是提取未捕获404错误。 我曾尝试编码以检查return.status，但无济于事。 我尝试测试return.ok，但是也没有用。 这是我正在执行的代码：

            function showProduct(barcode) {

            let url = "https://cors-anywhere.herokuapp.com/http://api.barcodelookup.com/v2/products?barcode=" + barcode + "&key=mj1pm32ylcctxj1byaia85n9dk2d4i";

            url = "https://cors-anywhere.herokuapp.com/http://api.barcodelookup.com/v2/products?barcode=5000159459211&key=mj1pm32ylcctxj1byaia85n9dk2d4i";

            const options = { method: 'GET' };                
            fetch( url, options)
            .then(function(response) {
                return response.json();
            })
            .then(function(myJson) {
                if (myJson == undefined) 
                {
                    console.log("fetch failed")
                } 
                else 
                {     
                    //inspect the data that the WebAPI returned
                    document.getElementById("showScanner").style.visibility = "hidden";
                    document.getElementById("scanner-container").style.visibility = "hidden";
                    document.getElementById("showProductDiv").style.visibility = "visible";
                    document.getElementById("productManufacturer").innerHTML = myJson.products[0].manufacturer;
                    document.getElementById("productName").innerHTML = myJson.products[0].product_name;
                    document.getElementById("productDescription").innerHTML = myJson.products[0].description;          
                    Quagga.stop(); 
                    }
            });
        }

这就是我执行代码时在调试器中看到的

当我查看调试器的“网络”选项卡并单击“标题”时，我看到以下内容：

因此，我的问题是，如何捕获状态码？

Answer 1

根据有关获取的响应的文档 ，您应该能够测试fetch的Promise解析为使用response.status的响应的状态代码。

请注意，尽管不直观，但是Promise fetch仅在出现连接错误时才返回拒绝。 如果连接成功并且有响应，则即使状态码不是200，此承诺也会与响应一起解决。