<p>axios๋Š” ์œ ํšจํ•œ HTTP ์‘๋‹ต์„ ๋˜์ง€๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค.</p>

์— ๋งŒ๋“  2016๋…„ 10์›” 09์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: axios/axios

axios๊ฐ€ status < 200 || status >= 300 ์ด์œ ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? defaults.js#L84 ์ฐธ์กฐ
HTTP ์˜ค๋ฅ˜ 500์€ ์„œ๋ฒ„์— ๋„๋‹ฌํ–ˆ์œผ๋ฉฐ http ํ”„๋กœํ† ์ฝœ์„ ์‚ฌ์šฉํ•˜์—ฌ ์œ ํšจํ•œ ์‘๋‹ต์„ ๋ฐ›์•˜์Œ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ๊ด€์ ์—์„œ HTTP ์˜ค๋ฅ˜ 500์€ ์˜ˆ์™ธ๋กœ ๊ฐ„์ฃผ๋  ์ˆ˜ ์žˆ์ง€๋งŒ ์ด๊ฒƒ์€ ๋‹ค๋ฅธ ์ถ”์ƒํ™” ์ˆ˜์ค€์— ์žˆ์œผ๋ฉฐ HTTP ์ถ”์ƒํ™”์™€ ์™„์ „ํžˆ ๊ด€๋ จ์ด ์—†์Šต๋‹ˆ๋‹ค.

๋‹ค๊ฐ€์˜ค๋Š” fetch ์‚ฌ์–‘๊ณผ ์ˆœ๋ฐฉํ–ฅ ํ˜ธํ™˜์„ ์œ„ํ•ด์„œ๋Š” ์œ ํšจํ•œ HTTP ์‘๋‹ต์˜ ๊ฒฝ์šฐ axios๊ฐ€ throwํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์ ธ์˜ค๊ธฐ ์‚ฌ์–‘์€ response.ok ์†์„ฑ์„ ์ง€์ •ํ•˜๋ฏ€๋กœ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ ๊ฐœ๋ฐœ์ž๊ฐ€ HTTP ์ž‘์—…์˜ ๊ฒฐ๊ณผ๋ฅผ ์‰ฝ๊ฒŒ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์œ ์‚ฌํ•œ ์ ‘๊ทผ ๋ฐฉ์‹์ด axios์— ์œ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์ ธ์˜ค๊ธฐ ์‚ฌ์–‘์— ๋Œ€ํ•œ ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์—ฌ๊ธฐ๋ฅผ ์ฐธ์กฐํ•˜์„ธ์š”.
https://fetch.spec.whatwg.org/#dom -response-ok
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๋งž์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ œ ์š”์ ์€ ์ด๊ฒƒ์ด ๊ธฐ๋ณธ๊ฐ’์ด ๋˜์–ด์„œ๋Š” ์•ˆ ๋œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์‚ฌ์‹ค ์ด๊ฒƒ์€ ๊ตฌ์„ฑํ•  ์ˆ˜๋„ ์—†์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

์„œ๋ฒ„ ์‘๋‹ต์ด ์žˆ์„ ๋•Œ ํ•ญ์ƒ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋„๋ก validateStatus ๊ตฌ์„ฑ ์˜ต์…˜์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋ฌธ์„œ์—์„œ :

// `validateStatus` defines whether to resolve or reject the promise for a given
// HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
// or `undefined`), the promise will be resolved; otherwise, the promise will be
// rejected.
validateStatus: function (status) {
  return status >= 200 && status < 300; // default
}

๋งž์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ œ ์š”์ ์€ ์ด๊ฒƒ์ด ๊ธฐ๋ณธ๊ฐ’์ด ๋˜์–ด์„œ๋Š” ์•ˆ ๋œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์‚ฌ์‹ค ์ด๊ฒƒ์€ ๊ตฌ์„ฑํ•  ์ˆ˜๋„ ์—†์Šต๋‹ˆ๋‹ค.

์šฐ๋ ค๋ฅผ ์ดํ•ดํ•˜์ง€๋งŒ Axios๋Š” fetch ๋ฅผ ๋Œ€์ฒดํ•˜๊ฑฐ๋‚˜ ๊ทธ ๋™์ž‘์„ ๋ชจ๋ฐฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ „ํ™”๋ฅผ ๊ฑธ๊ธฐ ์œ„ํ•œ ์–ด๋Œ‘ํ„ฐ๋กœ ์‚ฌ์šฉํ•˜์ง€๋„ ์•Š์Šต๋‹ˆ๋‹ค(๋‹น๋ถ„๊ฐ„ XHR์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค).

Axios๋Š” ๋Œ€๋ถ€๋ถ„์˜ ์‚ฌ๋žŒ๋“ค์ด ์‚ฌ์šฉํ•  ๊ธฐ๋ณธ๊ฐ’์„ ์ œ๊ณตํ•˜์—ฌ ๊ฐ€๋Šฅํ•œ ํ•œ ๊ตฌ์„ฑ ๊ฐ€๋Šฅํ•˜๋„๋ก ๋…ธ๋ ฅํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ฒฝ์šฐ ์‚ฌ๋žŒ๋“ค์€ ์„œ๋ฒ„์˜ ์‘๋‹ต ์งํ›„์— ์ƒํƒœ ์ฝ”๋“œ๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ:

fetch(url).then(verifyStatus).then(...);

์ด๊ฒƒ์ด fetch-check-http-status ์™€ ๊ฐ™์€ ํŒจํ‚ค์ง€๊ฐ€ ์กด์žฌํ•˜๋Š” ์ด์œ ์ž…๋‹ˆ๋‹ค.

์šฐ๋ฆฌ๋Š” ๋„ˆ๋ฌด ์ž์ฃผ ๋ฐ˜๋ณต๋˜๋Š” ๊ตฌ์กฐ๋ฅผ ํ”ผํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„์˜ ์œ ํšจํ•œ ์‘๋‹ต์œผ๋กœ ํ•ด๊ฒฐํ•˜๋ ค๋ฉด ํ•ญ์ƒ validateStatus: false ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰