React

SuperAgent로 API 호출하기

citron031 2022. 11. 10. 08:54

 

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/

 

SuperAgent — elegant API for AJAX in Node and browsers

SuperAgent SuperAgent is light-weight progressive ajax API crafted for flexibility, readability, and a low learning curve after being frustrated with many of the existing request APIs. It also works with Node.js! request .post('/api/pet') .send({ name: 'Ma

visionmedia.github.io

github repo : https://github.com/visionmedia/superagent

 

GitHub - visionmedia/superagent: Ajax for Node.js and browsers (JS HTTP client)

Ajax for Node.js and browsers (JS HTTP client). Contribute to visionmedia/superagent development by creating an account on GitHub.

github.com