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
์๋ฒ ์๋ต์ด ์์ ๋ ํญ์ ํ์ธํ ์ ์๋๋ก 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
์ค์ ํ ์ ์์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ง์ต๋๋ค. ํ์ง๋ง ์ ์์ ์ ์ด๊ฒ์ด ๊ธฐ๋ณธ๊ฐ์ด ๋์ด์๋ ์ ๋๋ค๋ ๊ฒ์ ๋๋ค. ์ฌ์ค ์ด๊ฒ์ ๊ตฌ์ฑํ ์๋ ์์ต๋๋ค.