Axios란?
Axios는 node.js와 브라우저를 위한 Promise기반 HTTP클라이언트입니다.
서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다.
쉽게 말해 벡엔드와 프론트엔드가 통신을 쉽게 하기 위해 ajax와 더불어 사용합니다.
axios특징
- 운영 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 - - - Node.js의 http api 사용
- Promise API 사용
- HTTP 요청 취소
- HTTP 요청과 응답을 JSON 형태로 자동 변경
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'axios 객체는 아래와 같이 간단한 HTTP요청을 할 수 있습니다.
axios({
url: 'https://test/api/cafe/list/today',
method: 'get',
data: {
today : 'sunday'
}
});하지만 조금 더 명확하게 사용하기 위해 method를 분리해서 작성할 수도 있습니다.
axios.get()
axios.post()
HTTP Methods
클라이언트가 웹서버에서 사용자 요청의 목적/종류를 알리는 수단
HTTP Methods 중 Axios 통신하는데 가장 많이 사용하는 메소드를 알아봅시다.
GET
형태
axios.get(url,[,config])GET : 입력한 url에 존재하는 자원에 요청을 합니다.
GET이 데이터를 받아오는 것이라고 했는데, 로그인 할 때도 GET을 사용하기도 합니다.
www.login.com/login?id=Hnk&pw=1234
// 실제로 없는 사이트입니다 이해를 돕기 위해서 추가했습니다.웹사이트 뒤에 쿼리스트링이 붙여진 것을 확인 할 수 있다.
✔ GET은 서버에서 어떤 데이터를 가져와 보여준다거나 하는 용도입니다.
주소에 있는 쿼리스트링을 활용해서 정보를 전달하는 것이지 GET메서드는 값이나 상태 등을 바꿀 수 없습니다.
예제코드
import axios form 'axios'
axios.get('https://my-json-server.typicode.com/zofqofhtltm8015/fs/user')
.then((res)=> {
console.log(res.data);
)}
.catch((err)=>{
console.log(err);
})//async/await을 사용한다면 아래와 같이 작성할 수 있습니다.
async getUser(){
try{
const response = await axios.get('/user?ID=1234');
console.log(response)
} catch (error){
console.log(error)
}
}[
{ id: 1, pw: '1234', name: 'JUST' },
{ id: 2, pw: '1234', name: 'DO' },
{ id: 3, pw: '1234', name: 'IT' }
]json 형태로 받아온걸 확인 할 수 있습니다.
GET 요청에 매개 변수 추가
GET 응답에는 URL에 매개변수가 포함될 수 있습니다.
axios.get('https://test.com/?today=sunday');또는 params옵션에서 추가하여 사용할 수 있습니다.
axios.get('https://test.com/', {
params: {
today: 'sunday'
}
});POST
형태
axios.post("url주소",{
data객체
},[,config])새로운 리소스를 생성(create)할 때 사용합니다.
✔ 로그인, 회원가입 등 사용자가 생성한 파일을 서버에다가 업로드 할 때 사용합니다.
post를 사용하면 주소창에 쿼리스트링이 남지 않기 때문에 GET보다 안전합니다.
✔ POST 역시 매개변수를 추가하는 방법은 GET과 같습니다.
axios.post('https://test.com/', {
params: {
today: 'sunday'
}
});여러 POST를 동시에 요청 할 수 있습니다.
getUserAccout(){
return axios.get('/user/1234');
}
getUserPermissions(){
axios.get('/user/1234/permissions');
}
Promise.all([getUserAccount(),getUserPermissions()])
.then((result){
const acct = result[0];
const perm = result[1];
})DELETE
REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용합니다.
형태
axios.delete(URL,[,config]);Delete메서드는 서버에 있는 데이터 베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않습니다.
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메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주목적으로 하고 있습니다.
출처
https://velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0
https://blog.npmjs.org/
https://axios-http.com/kr/
