从 Fetch 中捕获 200 OK 以外的响应

Posted 2023-02-27

【中文标题】从 Fetch 中捕获 200 OK 以外的响应

【英文标题】：Capturing Responses other than 200 OK From Fetch

【发布时间】：2017-12-14 21:35:54

【问题描述】：

我正在使用here 指定的本机提取库。似乎每当返回 200 OK 以外的响应时，它都会抛出字符串响应 Uncaught (in promise) TypeError: Failed to fetch 的异常。

有没有办法捕获特定的 HTTP 响应代码并对其进行分支并仍然查看响应数据？例如 401 响应？

我附上了我用作提取包装器的请求代码。

static request(url, data) 

    let headers = 
        "Authorization": window.localStorage.getItem("Authorization"),
        "Content-Type": "application/json"
    ;

    let options = 
        method: "GET",
        headers: headers,
        mode: "no-cors",
        cache: "no-cache",
    ;

    if (data) 
        options = 
            method: "POST",
            headers: headers,
            mode: "no-cors",
            cache: "no-cache",
            body: JSON.stringify(data)
        
    

    return new Promise(async (resolve, reject) => 

        try 

            let response = await fetch(url, options);
            let jsonResponse = await response.json();
            return resolve(jsonResponse);

         catch (error) 
            // hashHistory.push("/login");
            return reject(error);
        

    )

   

【问题讨论】：

一般来说，您永远不需要自己构造Promise 对象。您可以直接在 request 函数中等待 fetch。

Never ever pass an async function to new Promise!

我认为这是问题的主要根源！感谢代码审查

【参考方案1】：

“对成功的 fetch() 的准确检查包括检查 promise 是否已解决，然后检查 Response.ok 属性的值是否为 true。代码如下所示 (https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch#Checking_that_the_fetch_was_successful)：

fetch('flowers.jpg').then(function(response) 
  if(response.ok) 
    response.blob().then(function(myBlob) 
      var objectURL = URL.createObjectURL(myBlob);
      myImage.src = objectURL;
    );
   else 
    console.log('Network response was not ok.');
  
)
.catch(function(error) 
  console.log('There has been a problem with your fetch operation: ' + error.message);
);

"

【参考方案2】：

你可以查看ResponseHeaders.status属性，.text()阅读Response。如果Response预计会被多次读取，可以使用.clone()

let request = fetch("/path/to/resource");

request
.then(response => 

    const status = response.headers.get("status");

    console.log(status);

    if (status == 401) 
      // read 401 response
      response.text().then(res = > console.log(res));
      return "404.html"
    
    if (status == 200) 
      return "200.html"
    
)
.then(result => console.log(result))
.catch(err => // handle error);