728x90
SuperAgent는 경량 Ajax API 라이브러리로, 사용하기 쉽고 Node.js에서도 작동하는 가독성이 좋은 라이브러리이다.
간단한 사용법은 다음과 같다.
import request from 'superagent';
request
.post('post 요청을 보낼 url')
.send({ 'payload': 'data' }) // payload
.set('Accept', 'application/json') // 옵션 설정
.then(res => {
console.log(res.body); // 결과 값
});
React에서 사용하는 예제를 만들어보았다.
import superagent from "superagent";
const HttpRequestWithSuperagent = () => {
const handlePostGet = async () => {
superagent
.post("http://localhost:8080/login")
.send({
email: "aaa@aaa.aaa",
name: "qwe",
password: "aaa111!!!",
})
.set("accept", "json")
.end((err, res) => {
if (err) {
alert(`err: ${JSON.stringify(err)}`);
} else {
alert(`res: ${JSON.stringify(res.body.data)}`);
}
});
const response = await superagent.get("http://localhost:8080/");
console.log(response);
};
return (
<div>
<h1>Request SuperAgent</h1>
<button onClick={handlePostGet}>POST & GET</button>
</div>
);
};
export default HttpRequestWithSuperagent;
공식 문서 : https://visionmedia.github.io/superagent/
github repo : https://github.com/visionmedia/superagent
728x90
'React' 카테고리의 다른 글
useEffect의 Clean-up 함수 (0) | 2022.11.10 |
---|---|
코드 깔끔하게 작성하기 (리액트, Styled-Components) (0) | 2022.11.10 |
React Query를 통한 실시간 서버 통신 (useQuery hook) (0) | 2022.11.08 |
간단한 Recoil 사용법 (0) | 2022.11.06 |
Redux를 이용하여 React 다크 모드 기능 구현하기 (with. styled-components) (0) | 2022.11.05 |