[{"data":1,"prerenderedAt":341},["ShallowReactive",2],{"content:\u002Fposts\u002F2023\u002Fjavascript-get-response-status-code-fetch":3,"surround:\u002Fposts\u002F2023\u002Fjavascript-get-response-status-code-fetch":329},{"id":4,"title":5,"body":6,"canonical":299,"categories":300,"date":302,"description":303,"draft":304,"extension":305,"image":299,"meta":306,"navigation":307,"path":308,"permalink":299,"readingTime":309,"recommend":299,"references":314,"seo":318,"sitemap":319,"stem":324,"tags":325,"type":299,"updated":302,"__hash__":328},"content\u002Fposts\u002F2023\u002Fjavascript-get-response-status-code-fetch.md","🔗 在JavaScript中获取Fetch HTTP响应的状态码(翻译)",{"type":7,"value":8,"toc":289},"minimark",[9,14,31,48,58,65,71,80,91,104,110,115,124,127,140,146,152,158,163,178,195,198,201,204,207,215,218,221],[10,11,13],"h2",{"id":12},"获取-fetch-http-响应的状态码","获取 Fetch HTTP 响应的状态码",[15,16,17,18,22,23,26,27,30],"p",{},"访问响应对象上的 ",[19,20,21],"code",{"code":21},"status"," 属性以获取使用 ",[19,24,25],{"code":25},"fetch"," 方法发出的 ",[19,28,29],{"code":29},"HTTP"," 请求的状态代码。",[15,32,33,36,37,39,40,43,44,47],{},[19,34,35],{"code":35},"response.status","属性包含响应的 ",[19,38,29],{"code":29}," 状态代码，例如 ",[19,41,42],{"code":42},"200"," 表示成功响应或 ",[19,45,46],{"code":46},"500"," 表示服务器错误",[49,50,56],"pre",{"className":51,"code":53,"language":54,"meta":55},[52],"language-js","async function makeRequest() {\n    try {\n        const response = await fetch(\"https:\u002F\u002Frandomuser.me\u002Fapi\u002F\")\n\n        console.log(\"response.status: \", response.status) \u002F\u002F 👉️ 200\n        console.log(response)\n    }\n    catch (err) {\n        console.log(err)\n    }\n}\n\nmakeRequest()\n","js","",[19,57,53],{"__ignoreMap":55},[15,59,60],{},[61,62],"img",{"alt":63,"src":64},"Alt text","https:\u002F\u002Fbobbyhadz.com\u002Fimages\u002Fblog\u002Fjavascript-get-response-status-code-fetch\u002Fget-status-code-of-fetch-http-response.webp",[15,66,67,68,70],{},"我们等待调用 ",[19,69,25],{"code":25}," 方法的响应并将结果分配给响应变量。",[15,72,73,74,76,77,79],{},"要获取 ",[19,75,29],{"code":29}," 响应的状态代码，请访问响应对象的 ",[19,78,21],{"code":21}," 属性。",[10,81,83,84,87,88],{"id":82},"使用-promisethen-而不是-asyncwait","使用 ",[19,85,86],{"code":86},"Promise.then()"," 而不是 ",[19,89,90],{"code":90},"async\u002Fwait",[15,92,93,94,97,98,87,101,103],{},"这是一个使用 ",[19,95,96],{"code":96},".then()"," 和 ",[19,99,100],{"code":100},".catch()",[19,102,90],{"code":90}," 的示例。",[49,105,108],{"className":106,"code":107,"language":54,"meta":55},[52],"function makeRequest() {\n    fetch(\"https:\u002F\u002Frandomuser.me\u002Fapi\u002F\")\n        .then((response) => {\n            console.log(\"response.status: \", response.status) \u002F\u002F 👉️ 200\n            console.log(response)\n        })\n        .catch((err) => {\n            console.log(err)\n        })\n}\n\nmakeRequest()\n",[19,109,107],{"__ignoreMap":55},[15,111,112],{},[61,113],{"alt":63,"src":114},"https:\u002F\u002Fbobbyhadz.com\u002Fimages\u002Fblog\u002Fjavascript-get-response-status-code-fetch\u002Fusing-promise-then-instead-of-async-await.webp",[15,116,117,118,120,121,123],{},"响应对象上的 ",[19,119,21],{"code":21}," 属性将仅为 ",[19,122,29],{"code":29}," 响应填充。",[15,125,126],{},"如果服务器根本没有响应，您遇到 CORS 错误或拼写错误的 URL，您将收到网络错误。",[15,128,129,130,133,134,136,137,139],{},"网络错误将运行 ",[19,131,132],{"code":132},"catch()"," 函数，并且不会填充 ",[19,135,21],{"code":21}," 属性，因为它不是服务器 ",[19,138,29],{"code":29}," 响应。",[10,141,83,143,145],{"id":142},"使用-fetch-时处理错误的完整示例",[19,144,25],{"code":25}," 时处理错误的完整示例",[15,147,148,149,151],{},"这是使用 ",[19,150,25],{"code":25}," 处理请求和错误的完整示例。",[49,153,156],{"className":154,"code":155,"language":54,"meta":55},[52],"async function makeRequest() {\n    try {\n        const response = await fetch(\"https:\u002F\u002Frandomuser.me\u002Fapi\u002F\")\n\n        console.log(\"status code: \", response.status) \u002F\u002F 👉️ 200\n\n        if (!response.ok) {\n            console.log(response)\n            throw new Error(`Error! status: ${response.status}`)\n        }\n\n        const result = await response.json()\n        return result\n    }\n    catch (err) {\n        console.log(err)\n    }\n}\n\nmakeRequest()\n",[19,157,155],{"__ignoreMap":55},[15,159,160],{},[61,161],{"alt":63,"src":162},"https:\u002F\u002Fbobbyhadz.com\u002Fimages\u002Fblog\u002Fjavascript-get-response-status-code-fetch\u002Fhandling-errors-when-using-fetch.webp",[15,164,165,166,173,174,177],{},"我们使用 ",[167,168,172],"a",{"href":169,"rel":170},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FResponse\u002Fok",[171],"nofollow","response.ok"," 属性来检查服务器是否以 ",[19,175,176],{"code":176},"200-299"," 范围内的状态响应。",[179,180,181],"alert",{},[15,182,183,184,186,187,190,191,194],{},"如果服务器的 HTTP 响应成功（200-299），",[19,185,172],{"code":172}," 属性的值将为 ",[19,188,189],{"code":189},"true","，否则，它的值将为 ",[19,192,193],{"code":193},"false","。",[15,196,197],{},"Fetch 本身不会拒绝 HTTP 请求的 Promise 响应，因此我们必须检查 ok 属性是否设置为 false。",[15,199,200],{},"如果 ok 属性设置为 false，则请求不成功，我们必须自己抛出错误。",[15,202,203],{},"如果有网络错误，例如 CORS 错误或与创建 HTTP 请求相关的错误，Promise 将自动被拒绝，并且我们的 catch 块将被触发。",[15,205,206],{},"如前所述，如果存在网络错误，则不会填充 status 属性，因为错误不是来自服务器 HTTP 响应。",[15,208,209,210,194],{},"我还写了一篇关于",[167,211,214],{"href":212,"rel":213},"https:\u002F\u002Fbobbyhadz.com\u002Fblog\u002Fjavascript-get-status-code-of-axios-error",[171],"如何获取 Axios HTTP 错误的状态代码的文章",[10,216,217],{"id":217},"资料",[15,219,220],{},"您可以通过查看以下教程来了解有关相关主题的更多信息：",[222,223,224,232,243,250,259,266,273,282],"ul",{},[225,226,227],"li",{},[167,228,231],{"href":229,"rel":230},"https:\u002F\u002Fbobbyhadz.com\u002Fblog\u002Fjavascript-referenceerror-fetch-is-not-defined",[171],"ReferenceError: fetch is not defined in NodeJs",[225,233,234],{},[167,235,238,239],{"href":236,"rel":237},"https:\u002F\u002Fbobbyhadz.com\u002Fblog\u002Fjavascript-typeerror-failed-to-fetch-cors",[171],"TypeError: Failed to fetch and CORS in JavaScript ",[240,241,242],"span",{},"Solved",[225,244,245],{},[167,246,249],{"href":247,"rel":248},"https:\u002F\u002Fbobbyhadz.com\u002Fblog\u002Ffetch-api-cannot-load-localhost-url-scheme",[171],"Fetch API cannot load localhost. URL scheme is not supported",[225,251,252],{},[167,253,256,257],{"href":254,"rel":255},"https:\u002F\u002Fbobbyhadz.com\u002Fblog\u002Ffetch-returns-empty-response-body-in-javascript",[171],"fetch() returns empty Response Body in JavaScript ",[240,258,242],{},[225,260,261],{},[167,262,265],{"href":263,"rel":264},"https:\u002F\u002Fbobbyhadz.com\u002Fblog\u002Fjavascript-get-mime-type-of-file",[171],"How to get the MIME type of a File in JavaScript & Node.js",[225,267,268],{},[167,269,272],{"href":270,"rel":271},"https:\u002F\u002Fbobbyhadz.com\u002Fblog\u002Fgoogle-chrome-copy-object-or-array-from-console",[171],"Chrome: How to Copy an Object or Array from the Console tab",[225,274,275],{},[167,276,279,280],{"href":277,"rel":278},"https:\u002F\u002Fbobbyhadz.com\u002Fblog\u002Ffailed-to-execute-fetch-on-window-in-javascript",[171],"TypeError: Failed to execute 'fetch' on 'Window' ",[240,281,242],{},[225,283,284],{},[167,285,288],{"href":286,"rel":287},"https:\u002F\u002Fbobbyhadz.com\u002Fblog\u002Fpost-form-data-using-javascript-fetch-api",[171],"How to POST Form Data using the JavaScript Fetch API",{"title":55,"searchDepth":290,"depth":290,"links":291},4,[292,294,296,298],{"id":12,"depth":293,"text":13},2,{"id":82,"depth":293,"text":295},"使用 Promise.then() 而不是 async\u002Fwait",{"id":142,"depth":293,"text":297},"使用 fetch 时处理错误的完整示例",{"id":217,"depth":293,"text":217},null,[301],"代码","2023-10-13 19:47:11","本文说明了如何获取 Fetch HTTP 响应的状态码",false,"md",{},true,"\u002Fposts\u002F2023\u002Fjavascript-get-response-status-code-fetch",{"text":310,"minutes":311,"time":312,"words":313},"4 min read",3.095,185700,619,[315],{"title":316,"link":317},"原文 Get the Status Code of a Fetch HTTP Response in JavaScript","https:\u002F\u002Fbobbyhadz.com\u002Fblog\u002Fjavascript-get-response-status-code-fetch",{"title":5,"description":303},{"loc":308,"images":320},[321,322,323],{"loc":64},{"loc":114},{"loc":162},"posts\u002F2023\u002Fjavascript-get-response-status-code-fetch",[326,327],"Fetch","JavaScript","LL2V0BZr7g9sNEgwzYiYpgxmqCPsiWQwitYEeIXweF8",[330,335],{"title":331,"path":332,"stem":333,"date":334,"type":299,"children":-1},"远程工作尝试","\u002Fposts\u002F2023\u002Ftry-remote-work","posts\u002F2023\u002Ftry-remote-work","2023-08-26 14:55:57",{"title":336,"path":337,"stem":338,"date":339,"type":340,"children":-1},"再观 ReLIFE 有感","\u002Fposts\u002F2023\u002Freview-relife","posts\u002F2023\u002Freview-ReLIFE","2023-10-21 19:31:18","story",1789642593316]