Axios: 422 ์‘๋‹ต์ด ๊ฑฐ๋ถ€๋˜์ง€ ์•Š์Œ

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

์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ๋งŽ์€ ๋ถ€๋ถ„์—์„œ [email protected] (0.15.3์œผ๋กœ ์—…๊ทธ๋ ˆ์ด๋“œํ•ด๋„ ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์ง€ ์•Š์Œ)์„ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์•ฑ์˜ ๋‹ค๋ฅธ ๋ชจ๋“  ๋ถ€๋ถ„์—์„œ .catch() 422๊ฐœ์˜ ์‘๋‹ต ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ตœ๊ทผ์— ์šฐ๋ฆฌ๋Š” 1๊ฐœ์˜ ์š”์ฒญ์ด 422 ์‘๋‹ต์„ ๋ฐ›๋Š” ์•ฝ์†์„ ํ•ด๊ฒฐํ•˜๊ณ  ์žˆ์Œ์„ ๋ฐœ๊ฒฌํ–ˆ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋‹ค๋ฅธ ๋ชจ๋“  ๋ถ€๋ถ„์—์„œ 422๋Š” axios ์•ฝ์†์ด ๊ฑฐ๋ถ€๋˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

export function addTool(name: string): Thunk {
  return (dispatch, getState) => {
    Axios
      .post<Tool>(API.current.toolsPath, { name })
      .then(resp => {
        if (resp instanceof Error) { throw resp; }
        success("Tool has been saved.", "Success");
        dispatch(addToolOk(resp.data));
      })
      .catch((e: Error) => {
        dispatch(addToolNo(e));
        error(prettyPrintApiErrors(e));
      });
  };
}

์†Œ์Šค ์ฝ”๋“œ๋Š” ์—ฌ๊ธฐ

.then() ์— ๋‹ค์Œ ์ค„์„ ์ถ”๊ฐ€ํ•˜์—ฌ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

if (resp instanceof Error) { throw resp; }

์ž˜ ์ž‘๋™ํ•˜์ง€๋งŒ ์ด ํŠน์ • 422๊ฐ€ ๊ฑฐ๋ถ€๋œ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ํ•ด๊ฒฐ๋œ ์ด์œ ์— ๋Œ€ํ•ด์„œ๋Š” ์—ฌ์ „ํžˆ ํ˜ผ๋ž€์Šค๋Ÿฝ์Šต๋‹ˆ๋‹ค. ์šฐ๋ฆฌ๋Š” ๋˜ํ•œ ์ผ๋ถ€ ์ธํ„ฐ์…‰ํ„ฐ ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์ง€๋งŒ ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“œ๋Š” ๋‹ค๋ฅธ ์š”์ฒญ์—๋Š” ๋ฌธ์ œ๋ฅผ ์ผ์œผํ‚ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

axios๊ฐ€ 422๋ฅผ ๊ฑฐ๋ถ€ํ•˜์ง€ ์•Š๊ณ  ํ•ด๊ฒฐํ•˜๋„๋ก ํ•˜๋Š” ์ƒํ™ฉ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๋‹ค๋ฅธ ์ •๋ณด๊ฐ€ ํ•„์š”ํ•˜๋ฉด ์•Œ๋ ค์ฃผ์‹ญ์‹œ์˜ค.

๋„์™€ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

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

์ด ๋ฌธ์ œ๋ฅผ ์กฐ์‚ฌํ•œ ๊ฒฐ๊ณผ ์‹ค์ œ๋กœ๋Š” ํ˜ธ์ถœ ์Šคํƒ ์–ด๋”˜๊ฐ€์— ์ˆจ์–ด ์žˆ๋Š” ๋กœ์ปฌ ์œ ํ˜• ์˜ค๋ฅ˜๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์–ด Axios์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ๋ผ ๋กœ์ปฌ ๋ฌธ์ œ๋ผ๊ณ  ๋ฏฟ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์—…๋ฐ์ดํŠธ:

์•ฝ๊ฐ„์˜ ์กฐ์‚ฌ ํ›„์—, ๋‚˜๋Š” ์ด๊ฒƒ์„ ๋‚˜์œ "์‘๋‹ต ๊ฑฐ๋ถ€๋œ" ์ธํ„ฐ์…‰ํ„ฐ์— ๊ณ ์ •ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์ธํ„ฐ์…‰ํ„ฐ ๋‚ด์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ผ์Šต๋‹ˆ๋‹ค.

return error

๋Œ€์‹  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•˜์—ฌ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค.

return Promise.reject(error);

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

ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค. redux-saga ์™€ ํ•จ๊ป˜ axios๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ๋„ ๋น„์Šทํ•œ ๊ฒƒ์„ ๋ณด๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ ์ผ๋ถ€ 422๊ฐœ๋Š” ๊ฑฐ๋ถ€๋œ ์•ฝ์†์œผ๋กœ ์ฒ˜๋ฆฌ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

์‹ ๊ฒฝ ์“ฐ์ง€ ๋งˆ์„ธ์š”, ๋‚ด ๋ฌธ์ œ๋ฅผ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค. ์ธํ„ฐ์…‰ํ„ฐ๊ฐ€ ์˜ค๋ฅ˜๋ฅผ ์•ฑ ๊ณ„์ธต์œผ๋กœ ์ œ๋Œ€๋กœ ์ „ํŒŒํ•˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค. d'oh! ๐Ÿ˜ณ

์ด ๋ฌธ์ œ๋ฅผ ์กฐ์‚ฌํ•œ ๊ฒฐ๊ณผ ์‹ค์ œ๋กœ๋Š” ํ˜ธ์ถœ ์Šคํƒ ์–ด๋”˜๊ฐ€์— ์ˆจ์–ด ์žˆ๋Š” ๋กœ์ปฌ ์œ ํ˜• ์˜ค๋ฅ˜๋ผ๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์–ด Axios์˜ ๋ฌธ์ œ๊ฐ€ ์•„๋‹ˆ๋ผ ๋กœ์ปฌ ๋ฌธ์ œ๋ผ๊ณ  ๋ฏฟ๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์—…๋ฐ์ดํŠธ:

์•ฝ๊ฐ„์˜ ์กฐ์‚ฌ ํ›„์—, ๋‚˜๋Š” ์ด๊ฒƒ์„ ๋‚˜์œ "์‘๋‹ต ๊ฑฐ๋ถ€๋œ" ์ธํ„ฐ์…‰ํ„ฐ์— ๊ณ ์ •ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

์ธํ„ฐ์…‰ํ„ฐ ๋‚ด์—์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ผ์Šต๋‹ˆ๋‹ค.

return error

๋Œ€์‹  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•˜์—ฌ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค.

return Promise.reject(error);
์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰