Axios๋?
- Axios๋ ๋ธ๋ผ์ฐ์ , Node.js๋ฅผ ์ํ Promise API๋ฅผ ํ์ฉํ๋ HTTP ๋น๋๊ธฐ ํต์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- ์ฝ๊ฒ ๋งํด์ ๋ฐฑ์๋๋ ํ๋ก ํธ์๋๋ ํต์ ์ ์ฝ๊ฒํ๊ธฐ ์ํด Ajax์ ๋๋ถ์ด ์ฌ์ฉํฉ๋๋ค.
- ์ ๋ AJAX๋ณด๋ค AXIOS๋ฅผ ํจ์ฌ ๋ง์ด ์ฌ์ฉํฉ๋๋ค.
๋ธ๋ผ์ฐ์ ํธํ์ฑ
| Latest โ | Latest โ | Latest โ | Latest โ | Latest โ | 11 โ |
axios ํน์ง
- ์ด์ ํ๊ฒฝ์ ๋ฐ๋ผ ๋ธ๋ผ์ฐ์ ์ XMLHttpRequest ๊ฐ์ฒด ๋๋ Node.js์ http api ์ฌ์ฉ
- Promise(ES6) API ์ฌ์ฉ
- ์์ฒญ๊ณผ ์๋ต ๋ฐ์ดํฐ์ ๋ณํ
- HTTP ์์ฒญ ์ทจ์
- HTTP ์์ฒญ๊ณผ ์๋ต์ JSON ํํ๋ก ์๋ ๋ณ๊ฒฝ
HTTP๋?
์ฌ๋ฝ๊ฒ ์๊ฐํ์ง ๋ง์ธ์. ์ ๋ง ์ฌ์ฉํ๊ธฐ ์ฝ์ต๋๋ค.
Axios ์ฌ์ฉ๋ฒ
- Axios ๋ค์ด๋ก๋
- HTTP Methods
- Axios ์ฌ์ฉํด๋ณด๊ธฐ
- GET
- POST
- PUT
- DELETE
- async await์ ๊ดํด ์ดํด๋ณด๊ธฐ
- Promise๋ก Axios์ฌ์ฉํด๋ณด๊ธฐ
- Axios ํ๊ฒฝ ๊ตฌ์ฑ
Axios๋ค์ด๋ก๋
์์ ์ด ์ฌ์ฉํ๋ ํจํค์ง ๋งค๋์ ๋ก ํ๋ก์ ํธ์ ์ถ๊ฐํด๋ณด์!
yarn add axios
npm i axios
Then...
import axios from 'axios'HTTP Methods
ํด๋ผ์ด์ธํธ๊ฐ ์น์๋ฒ์๊ฒ ์ฌ์ฉ์ ์์ฒญ์ ๋ชฉ์ /์ข ๋ฅ๋ฅผ ์๋ฆฌ๋ ์๋จ
HTTP Methods ์ค Axiosํต์ ํ๋๋ฐ ๋ง์ด ์ฌ์ฉํ๋ ๋ฉ์๋๋ฅผ ์ ๋ฆฌํ์ต๋๋ค!
GET
ํํ
axios.get(url,[,config]) GET : ์ ๋ ฅํ url์ ์กด์ฌํ๋ ์์์ ์์ฒญ์ ํฉ๋๋ค.
๐ค Get์ด ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๋ ๊ฒ์ด๋ผ๊ณ ํ๋๋ฐ, ์ ๋ ๋ก๊ทธ์ธ์ ๊ตฌํํ ๋ GET์ ์ฌ์ฉํ๋๋ฐ์ฉ?
GET์ผ๋ก ๋ก๊ทธ์ธ์ ๊ตฌํํ์๋ ์น ์ฌ์ดํธ ์ฃผ์์ฐฝ์ ํํ๋ฅผ ์ ๋ณด๋ฉด ์ด๋ฌํ ํํ๊ฐ ๋์ฌ ๊ฒ์ ๋๋ค.
www.yourserver.com/login?id=Hnk&pw=1234
// ์ค์ ๋ก ์๋ ์ฌ์ดํธ์
๋๋ค! ์ดํด๋ฅผ ๋๊ธฐ ์ํด์ ์ถ๊ฐํ์ต๋๋ค.- ์น ์ฌ์ดํธ ๋ค์ ์ฟผ๋ฆฌ์คํธ๋ง์ด ๋ถ์ฌ์ง ๊ฒ์ ํ์ธํ์ค ์ ์์ต๋๋ค.
โ GET์ ์๋ฒ์์ ์ด๋ค ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์์ ๋ณด์ฌ์ค๋ค๊ฑฐ๋ ํ๋ ์ฉ๋์ด๋ค. ์ฃผ์์ ์๋ ์ฟผ๋ฆฌ์คํธ๋ง์ ํ์ฉํด์ ์ ๋ณด๋ฅผ ์ ๋ฌํ๋ ๊ฒ์ด์ง GET๋ฉ์๋๋ ๊ฐ์ด๋ ์ํ๋ฑ์ ๋ฐ๊ฟ ์ ์์ต๋๋ค.
์์ ์ฝ๋
import axios from 'axios';
axios.get('https://my-json-server.typicode.com/zofqofhtltm8015/fs/user').then((Response)=>{
console.log(Response.data);
}).catch((Error)=>{
console.log(Error);
})[
{ id: 1, pw: '1234', name: 'JUST' },
{ id: 2, pw: '1234', name: 'DO' },
{ id: 3, pw: '1234', name: 'IT' }
]json ํํ๋ก ์ ๋ฐ์์จ ๊ฑธ ํ์ธํ ์ ์์ต๋๋ค.
POST
ํํ
axios.post("url์ฃผ์",{
data๊ฐ์ฒด
},[,config])
โ์๋ก์ด ๋ฆฌ์์ค๋ฅผ ์์ฑ(create)ํ ๋ ์ฌ์ฉํฉ๋๋ค.
post ๋ฉ์๋์ ๋ ๋ฒ์งธ ์ธ์๋ ๋ณธ๋ฌธ์ผ๋ก ๋ณด๋ผ ๋ฐ์ดํฐ๋ฅผ ์ค์ ํ ๊ฐ์ฒด ๋ฆฌํฐ๋ด์ ์ ๋ฌํฉ๋๋ค.
๐ค Post๋ ์๋ก์ด ๋ฆฌ์์ค๋ฅผ ์์ฑํ ๋ ์ฌ์ฉ๋๋๋ฐ ๊ทธ๋ฌ๋ฉด ์ธ์ POST๋ฅผ ์ฌ์ฉํ๋์?
โ ๋ก๊ทธ์ธ, ํ์๊ฐ์ ๋ฑ ์ฌ์ฉ์๊ฐ ์์ฑํ ํ์ผ์ ์๋ฒ์๋ค๊ฐ ์ ๋ก๋ํ ๋ ์ฌ์ฉํฉ๋๋ค. Post๋ฅผ ์ฌ์ฉํ๋ฉด ์ฃผ์์ฐฝ์ ์ฟผ๋ฆฌ์คํธ๋ง์ด ๋จ์ง ์๊ธฐ๋๋ฌธ์ ๐ GET๋ณด๋ค ์์ ํด์!
- Post ์์ ๋ ๋ก๊ทธ์ธ ๊ตฌํ ์์ ๋ก ํ ๊ฒ์!
Delete
REST ๊ธฐ๋ฐ API ํ๋ก๊ทธ๋จ์์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ ์ฅ๋์ด ์๋ ๋ด์ฉ์ ์ญ์ ํ๋ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉํฉ๋๋ค.
ํํ
axios.delete(URL,[,config]);โ Delete๋ฉ์๋๋ HTML Form ํ๊ทธ์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ๋ HTTP ๋ฉ์๋๊ฐ ์๋๋๋ค!
Delete๋ฉ์๋๋ ์๋ฒ์ ์๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ด์ฉ์ ์ญ์ ํ๋ ๊ฒ์ ์ฃผ ๋ชฉ์ ์ผ๋ก ํ๊ธฐ์ ๋ ๋ฒ์งธ ์ธ์๋ฅผ ์์ ์ ๋ฌํ์ง ์์ต๋๋ค.
์์ ์ฝ๋
axios.delete("/thisisExample/list/30").then(function(response){
console.log(response);
}).catch(function(ex){
throw new Error(ex)
}PUT
REST ๊ธฐ๋ฐ API ํ๋ก๊ทธ๋จ์์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ ์ฅ๋์ด ์๋ ๋ด์ฉ์ ๊ฐฑ์ ํ๋ ๋ชฉ์ ์ผ๋ก ์ฌ์ฉ๋ฉ๋๋ค.
ํํ
axios.put(url[, data[, config]])โ PUT๋ฉ์๋๋ HTML Form ํ๊ทธ์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์ํ๋ HTTP ๋ฉ์๋๊ฐ ์๋๋๋ค!
PUT๋ฉ์๋๋ ์๋ฒ์ ์๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ๋ด์ฉ์ ๋ณ๊ฒฝํ๋ ๊ฒ์ ์ฃผ ๋ชฉ์ ์ผ๋ก ํ๊ณ ์์ต๋๋ค.
Axios ์๋ฒ ํต์
- ๋ฐฑ์๋ ์์ด FakeServer๋ก ํต์ ํด๋ณด์!
- ๋ฐฑ์๋ ์์ด ๋ก๊ทธ์ธ ํด๋ณด์!
๋ฐฑ์๋ ์์ด ์๋ฒ ํต์ ํ๋ ๋ฒ!
์ค์ API๋ฅผ ๊ฐ์ง๊ณ ์๋ฒ ํต์ ์ ํด๋ณด๊ณ ์ถ์ผ๋ฉด ๋ฐฑ์๋ ๊ฐ๋ฐ์์ ๊ฐ์ด ํ๋ ๊ฒ์ด ์ ์์ด์ง๋ง, ๋ฐฑ์๋ ๊ฐ๋ฐ์๊ฐ ์์ด๋ ๋ค์ํ ๋ฐฉ๋ฒ์ผ๋ก ํ ์คํธ ํด๋ณผ ์ ์์ต๋๋ค.
- Mock์๋ฒ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
- ๋ค์ํ ์จ๋ผ์ธ Fake์๋ฒ๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
์ ๊ฐ ์ฌ์ฉํ ๊ฒ์ reqres ์ด๋ผ๋ FakeServer์ ๋๋ค.
๋ก๊ทธ์ธ์ ๋ง๋ค์ด ๋ณด์!
- ๋ก๊ทธ์ธ ์ํคํ
์ฒ
๋ฌด์์ ๋ง๋ค๊ฑด์ง ์ํคํ
์ฒ๋ฅผ ๊ทธ๋ ค๋ดค์ต๋๋ค.
(๋ถ๋ ์ดํด๊ฐ ์ ๊ฐ์
จ์ผ๋ฉด ์ข๊ฒ ์ต๋๋ค!)
FakeServer๋ ์ฌ๊ธฐ๋ฅผ ๋์์ผ๋ก ํ ์คํธ ํด ๋ณด์์ต๋๋ค!
emailํ๊ณ password๋ฅผ ์ ์ด๋ฏธ์ง์ ์ฐ์ฌ ์๋ ๊ฒ์ด๋ ๋๊ฐ์ด ์
๋ ฅํด์ผ ๋ก๊ทธ์ธ ์ธ์ฆ์ด ๋ฉ๋๋ค!
"email": "eve.holt@reqres.in",
"password": "cityslicka"- HTML ํ์ผ
<body>
<div>
<input type="email" placeholder="email์ ์
๋ ฅํด์ฃผ์ธ์ฉ" id="email" value="" >
</div>
<div>
<input type="password" placeholder="๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํด์ฃผ์ธ์ฉ" id="pw" value="">
</div>
<input type="button" onclick='onLoggin()' value="๋ก๊ทธ์ธ">
</body>- JS ํ์ผ
function onLoggin(){
const email = document.getElementById("email");
const password = document.getElementById('pw')
axios({
method:"POST",
url: 'https://reqres.in/api/login',
data:{
"email": email.value,
"password": password.value
}
}).then((res)=>{
console.log(res);
}).catch(error=>{
console.log(error);
throw new Error(error);
});
}
}์คํ์ค ์ค๋ฅ๊ฐ ์๊ธฐ๊ฑฐ๋ ํต ํ์ผ์ ๋ณด๊ณ ์ถ์ผ์๋ฉด ์ฌ๊ธฐ๋ฅผ ํด๋ฆญํด์ฃผ์ธ์!
์คํํ๋ฉด
- ์ฌ๋ฐ๋ฅธ ์ถ๋ ฅ
๋ก๊ทธ์ธ ์ธ์ฆ์ด ์ฑ๊ณต์ ์ผ๋ก ๋ง์ณ ํ ํฐ์ ๋ฐ๊ธ๋ฐ์ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค. - ์ฌ๋ฐ๋ฅด์ง ๋ชปํ ์ถ๋ ฅ
Email๋ฅผ ์๋ชป์ ๋ ฅํ์ ๋ ๋๋ ์ค๋ฅ์ ๋๋ค. 400์๋ฌ๊ฐ ๋จ๋ ๊ฒ์ ๋ณผ ์ ์์ต๋๋ค.
๋น๋ฐ๋ฒํธ๋ฅผ ์๋ชป์ ๋ ฅํ์ ๋์๋ 400์๋ฌ๊ฐ ๋ ์ผ๋๋๋ฐ FakeServer์์ฒด์ ์ค๋ฅ์ธ์ง ๋ชจ๋ฅด๊ฒ ์ง๋ง ์ฑ๊ณต์ ์ผ๋ก ํ ํฐ์ ๋ฐ์(๋ก๊ทธ์ธ ์ธ์ฆ ์ฑ๊ณต)์จ ๊ฒ์ ํ์ธํ์ค ์ ์์ต๋๋ค.
๋ด๊ฐ๋ง๋ ๊ฒ !! ๋ก๊ทธ์ธ๊ตฌํ!!
์ถ์ฒ
- https://im-developer.tistory.com/166
- Vue.js ์ฒซ๊ฑธ์ CHAPTER 14 ๋ผ์ฐํ ๊ณผ HTTP ํต์ (์ ์: ์ด์งํธ)
- https://github.com/axios/axios
- https://xn--xy1bk56a.run/axios/guide/
