Axios: ๋ณธ๋ฌธ ์‚ญ์ œ ์ง€์›

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

์ด๊ฒƒ์€ ์•„๋งˆ๋„ axios ํŒ€์˜ ๋””์ž์ธ ์„ ํƒ์ผ ๊ฒƒ์ด๊ณ  ํƒ€๋‹นํ•œ ์ด์œ ๊ฐ€ ์žˆ์ง€๋งŒ ์ €๋Š” ๋ชจ๋“  POST/GET/PUT์„ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค.

const res = await axios.post(url, { 
  data: {
    ...
  }
})

๊ทธ๋ฆฌ๊ณ  ๋‚ด ์„œ๋ฒ„๋Š” ๋•Œ๋•Œ๋กœ DELETE ์š”์ฒญ ๋ณธ๋ฌธ ๋‚ด๋ถ€์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์˜ˆ์ƒํ•ฉ๋‹ˆ๋‹ค(๊ธฐ์ˆ ์ ์œผ๋กœ ์‚ฌ์–‘์— ๋”ฐ๋ฅด์ง€ ์•Š์„ ์ˆ˜ ์žˆ์ง€๋งŒ ๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ์ผ๋ฐ˜์ ์ž„). ์ด ๊ฒฝ์šฐ DELETE๋ฅผ ๋‹ค์Œ ํ˜•์‹์œผ๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

      const res = await axios({
        method: 'DELETE',
        url: 'url',
        data: {
          ...
        }
      })

์ž˜ ์ž‘๋™ํ•˜์ง€๋งŒ axios.delete ๊ฐ€ ์š”์ฒญ ๋ณธ๋ฌธ์„ ์ง€์›ํ•˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๋‘ ๋ฒˆ์งธ ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ axios.delete ๊ฐ€ ์š”์ฒญ ๋ณธ๋ฌธ์„ ์ง€์›ํ•˜๋„๋ก ์š”์ฒญํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

๊ฐ์‚ฌ ํ•ด์š”

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

axiox.delete ๋Š” ์š”์ฒญ ๋ณธ๋ฌธ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. url ๋ฐ ์„ ํƒ์  config ์˜ ๋‘ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค. config.data ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‘๋‹ต ๋ณธ๋ฌธ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

axios.delete(url, { data: { foo: "bar" } });

post , put ๋ฐ patch 3๊ฐœ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜ ํ—ˆ์šฉ: url , data ๋ฐ config ๋”ฐ๋ผ์„œ ๋‹ค์Œ์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘ ๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‘๋‹ต ๋ณธ๋ฌธ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

axios.put(url, { foo: "bar" });

๋„์›€์ด ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค!

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

์šฐ๋ฆฌ๋Š” ์ข…์ข… ์„œ๋ฒ„์—์„œ GET ์š”์ฒญ๊ณผ ํ•จ๊ป˜ data ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ์ฟผ๋ฆฌ ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ๋ณ€ํ™˜๋ฉ๋‹ˆ๋‹ค. ํŠน์ • ๋ฉ”์†Œ๋“œ์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ ์ง€์›์ด ์—†๋‹ค๋Š” ๊ฒƒ์€ ๋™ํ˜• ์ฝ”๋“œ๋ฅผ ๋” ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ธฐ๋ฅผ ํฌ๋งํ•˜๋Š” axios์˜ ํฐ ๋‹จ์ ์ž…๋‹ˆ๋‹ค.

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์—์„œ ์ด ๋‹ต๋ณ€์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค.

axiox.delete ๋Š” ์š”์ฒญ ๋ณธ๋ฌธ์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. url ๋ฐ ์„ ํƒ์  config ์˜ ๋‘ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค. config.data ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‘๋‹ต ๋ณธ๋ฌธ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

axios.delete(url, { data: { foo: "bar" } });

post , put ๋ฐ patch 3๊ฐœ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜ ํ—ˆ์šฉ: url , data ๋ฐ config ๋”ฐ๋ผ์„œ ๋‹ค์Œ์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‘ ๋ฒˆ์งธ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‘๋‹ต ๋ณธ๋ฌธ์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

axios.put(url, { foo: "bar" });

๋„์›€์ด ๋˜๊ธฐ๋ฅผ ๋ฐ”๋ž๋‹ˆ๋‹ค!

README ๊ฐ€ ์ดํ•ดํ•˜๊ธฐ ์–ด๋ ต๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  // `data` is the data to be sent as the request body
  // Only applicable for request methods 'PUT', 'POST', and 'PATCH'
  // When no `transformRequest` is set, must be of one of the following types:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - Browser only: FormData, File, Blob
  // - Node only: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

์ด ๋ถ€๋ถ„์€ ํŠนํžˆ // Only applicable for request methods 'PUT', 'POST', and 'PATCH' ์ž…๋‹ˆ๋‹ค.

์ด ์˜๊ฒฌ ์„ ๋ฌธ์„œ์— ์ถ”๊ฐ€ํ•˜์‹ญ์‹œ์˜ค

๋ฌธ์„œ https://github.com/axios/axios#request -method-aliases์— ์žˆ์Šต๋‹ˆ๋‹ค.

์ด๋“ค๋‘˜์˜ ์ฐจ์ด์ ์€ ๋ฌด์—‡์ธ๊ฐ€์š”?

this.$axios.$delete(queryData.url,
        {
          params: { id: String(queryData.id) }
        })
this.$axios.$delete(queryData.url,
        {
          body: { id: String(queryData.id) }
        })

[params] ๋‚ด ํŽธ์—์„œ ์ผํ–ˆ์Šต๋‹ˆ๋‹ค

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