get과 post를 axios를 이용하여 수박 겉햝기 식으로 공부했었는데 (..) 오늘에 와서 제대로 이 부분에 대해서 짚고 넘어가고 싶어서 포스팅을 작성하게 되었다.
1. fetch get
먼저, 자바스크립트의 내장함수 fetch를 이용하여 get을 실행해보고자 한다.
import React, {Component} from 'react';
class R059_FetchGet extends Component {
componentDidMount = async() => {
const response = await fetch('http://date.jsontest.com');
const body = await response.json();
alert(body.date)
}
render(){
return (
<h1>fetch get</h1>
)
}
};
export default R059_FetchGet;fetch를 이용하게 되면, 쉽게 비동기 통신을 구현할 수 있다! 비동기 통신이란, 쉽게 말해 먼저 시작한 작업의 완료 여부와 상관없이 다음 작업을 실행하는 것이다.
fetch를 사용하여 get 방식으로 url을 호출하여, 데이터를 가져올 수 있다. 이때 가져온 데이터는 response에 담기게 된다. 이때 fetch 함수에서 별도의 http 메서드 설정이 없다면, get 방식으로 호출하게 된다.
위와 같이 받게 될 response는 json 형태이기 때문에 json()함수로 사용할 수 있도록 변환하여 body 함수에 할당하였다. fetch 함수의 비동기적인 특징 때문에 date를 가져오기 전에 milliseconds가 실행되어서 에러가 발생할 수 있다.
이런 에러는 비동기 함수에 동기적인 기능을 추가하여 해결할 수 있다.그게 바로 async와 awiat 문법이다. 비동기 함수를 실행하는 함수에 async를 추가하고, 동기적으로 처리해야 하는 함수 구문 앞에 await 를 추가하면 된다!
타단~
2. fetch post
GET이 데이터를 조회하여 가져와 사용하는 용도로 사용한다면, post는 서버의 상태나 데이터를 변경하는 등의 수행 작업에 사용된다!
post 방식은 http body에 데이터를 넣어 전달하게 되는데, url 뒤에 파라미터를 표시하지 않고 사용할 수 있다는 장점이 있다.
post도 get과 마찬가지로 자바스크립트 내장 함수인 fetch를 사용하면 비동기 통신을 구현할 수 있다.
fetch 사용 방법은 get과 비슷하지만, 두번째 파라미터에 post 호출에 대한 정보가 추가된다.
http에서 통신을 할 때, header 부분에서 어떤 형태의 데이터를 사용할지 지정한다. 이때 Content-Type이라는 변수를 사용하여, json이라는 데이터를 사용한다고 알려준다! :)
http body에 json 형태의 데이터를 담아서 전송할 수 있게 된다.
아래는 코드이다.
import React, {Component} from 'react';
class R060_FetchPost extends Component {
componentDidMount = async() => {
const response = await fetch('http://date.jsontest.com/', {
method : 'POST',
headers :{
'Content-Type' : 'application/json',},
body : { a : "react", b: 200},
});
const body = await response.json();
alert(body.date)
}
render(){
return (
<h1>fetch post</h1>
)
}
};
export default R060_FetchPost;3. Axios 사용하기
axios란 무엇일까?
일단 axios를 설치해야 하니 다음과 같이 입력하여 패키지를 설치하자.
npm install -save axios
Axios 사용 방법은 아래 공식 홈페이지를 참고해보자.
공식 홈페이지 링크
Axios가 뭐예여?
Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다!
Get 요청 수행하기
const axios = require('axios');
// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
.then(function (response) {
// 성공 핸들링
console.log(response);
})
.catch(function (error) {
// 에러 핸들링
console.log(error);
})
.then(function () {
// 항상 실행되는 영역
});
// 선택적으로 위의 요청은 다음과 같이 수행될 수 있습니다.
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// 항상 실행되는 영역
});
// async/await 사용을 원한다면, 함수 외부에 `async` 키워드를 추가하세요.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}호출이 완료되면 response가 반환되며, response와 호출된 변수명 사이에 data를 붙이면 response.data.date 이런식으로! 변수를 직접 사용할 수 있다.
POST 요청 수행하기
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});get과의 차이점은 함수의 파라미터로 json과 같은 형태의 데이터를 넣고, http body에 담아 url을 호출할 수 있다는 것이다!
url 호출이 완료되면, then 함수가 실행되고, 이때 호출 결과가 response에 담겨 반환된다. response와 호출된 변수명 사이에 data를 붙이면 또다시 변수를 사용할 수 있다!
