【axios】HTTP 리퀘스트 메소드별의 인수 일람표(앨리어스를 사용했을 경우)

소개

Promise 기반 HTTP 클라이언트인 axios의 HTTP 요청 메소드에 다른 인수 목록을 만들었습니다. (별칭을 사용한 경우)

환경

OS: macOS Catalina 10.15.1
Vue: 2.6.10
vuex: 3.1.2
axios: 0.19.0

결론: 요약

공식 문서

For convenience aliases have been provided for all supported request methods.

axios는 HTTP 요청을 쉽게 던질 수 있도록 다음과 같은 별칭을 제공합니다.

sample.js

axios.エイリアス(第1引数, 第2引数, 第3引数)

별칭
첫 번째 인수
두 번째 인수
세 번째 인수


request (선택 사항)
config
-
-

get
url
(config)
-

delete
url
(config)
-

post
url
데이터
(config)

put
url
데이터
(config)

패치
url
데이터
(config)


※1 config 에는, 오브젝트로 임의의 HTTP 리퀘스트에 필요한 정보를 건네줄 수가 있습니다.
※2 (config) 는 필수는 아닙니다.

사용 예

axios.request({ //axios({ のように.request省略可
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

axios.get('anyUrl')

axios.post('anyUrl', anyParams)

여담: 왜 쓰려고 했는가?

DELETE 요청에 params를 전달하고 싶은 상황에 다음 코드를 작성했습니다.

sample.js

axios.delete('/api/v1/any', anyParams)

그 전에 axios를 사용해 이하 POST 리퀘스트를 던지는 코드가 움직이고 있어, 그대로 유용하면 잘 된다고 생각했지만, DELETE 리퀘스트의 Body에 params가 들어주지 않았습니다.

sample.js

axios.post('/api/v1/any/create', anyParams)

【해결】

다음과 같이 수정하여 해결했습니다.

sample.js

//これではanyParamsが、paramsとして認識されない
axios.delete('/api/v1/any', anyParams)

↓

sample.js

//これでconfig扱いとなり、anyParamsをparamsとしてDELETEリクエストに含めて渡すことが出来るようになる
axios.delete('/api/v1/any', {params: anyParams })

post와 delete, 같은 쓰는 방법으로 괜찮다고 생각했기 때문에 문제의 대상으로 파악하지 않고, 빠져버려 반성입니다

결론

끝까지 읽어 주셔서 감사합니다

누군가의 도움이 되길 바랍니다

참고로 한 사이트 (항상 감사합니다)

GitHub - axios/axios: Promise based HTTP client for the browser and node.js