axios

axios

Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. 서버에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다.

 

사용법

-back 서버에 보내는 주소 리스트

https://github.com/ZeroCho/sleact/blob/master/API.md

GitHub - ZeroCho/sleact

 

        axios
          .post('http://localhost:3095/api/users', {
            email,
            nickname,
            password,
          })
          // 성공하는 경우
          .then((response) => {
            console.log(response);
          })
          // 실패하는 경우
          .catch((error) => {
            console.log(error.response);
          })
          // 성공을 하든 실패를 하든 무조건 실행되는 코드
          .finally(() => {});
      }

저 위에 있는 링크에서 주소를 보고 axios로 백엔드 서버로 보낸다. 이때 then은 성공한 경우, catch는 실패한 경우, finally는 실패하든 성공하든 무조건 실행이 된다. 따라서 finally에는 공통적으로 실행해야 할 기능이 있으면 사용하면된다.

 

        // 요청하기 전에 한번 초기화하는게 좋다.
        setSignUpError('');
        setSignUpSuccess(false);

        axios
          .post('/api/users', {
            email,
            nickname,
            password,
          })
          // 성공하는 경우
          .then((response) => {
            console.log(response);
            setSignUpSuccess(true);
          })
          // 실패하는 경우
          .catch((error) => {
            console.log(error.response);
            setSignUpError(error.response.data);
          })
          // 성공을 하든 실패를 하든 무조건 실행되는 코드
          .finally(() => {});

then이나 catch 같은 비동기 요청을 하기 전에 state를 한번 초기화 해주는 것이 좋다. 왜냐하면 연달아 요청을 할 경우 첫번째 요청 때 남은 결과가 두번째 요청에도 영향을 줄 수 있다. 따라서 초기화 하는 과정이 로딩이고, then은 성공, catch는 실패 단계 이렇게 3가지 단계로 구분할 수 있다. 

 

-try catch

     // 혹은 try catch 문으로도 사용 가능하다.
      try {} catch(err) {

      } finally {

      }

아니면 try catch를 사용할 수도 있다. try catch에도 finally가 있어서 공통적으로 할 기능이 있으면 사용하면 된다.

 

삽질한 것

백엔드 서버를 키지 않고서 axios로 post를 했는데 에러가 나서 왜 안되는거지 이러고 있었다,,, 아직 많이 부족하다,,,

 

에러 잡기

만약 백엔드 서버에

  app.use(
    cors({
      origin: true,
      credentials: true,
    })
  );

 

이런 코드가 추가되어 있지 않으면 axios 통신을 할때 에러가 발생한다. 

이 에러는 백엔드와 프론트엔드의 주소가 달라서 발생한다. 이 경우에 해결법은 2가지가 있다.

 

1. 저 에러 메시지를 백엔드에게 보여주고 해결한다.

2. 프론트엔드가 해결한다. 

 

2번의 경우에는 webpack.config.ts 파일 안에서 devServer에 proxy 서버를 설정하면 된다.

proxy: {
      '/api/': {
        target: 'http://localhost:3095',
        changeOrigin: true,
        ws: true,
      },
    },
  },

proxy는 "프론트엔드에서 api로 보내는 요청은 target에 써져있는 곳에서 보낸거 처럼 취급하겠다."라는 의미이다.

 

-SignUp/index.tsx

        axios
          .post('http://localhost:3095/api/users', {
            email,
            nickname,
            password,
          })
          // 성공하는 경우
          .then((response) => {
            console.log(response);
          })
          // 실패하는 경우
          .catch((error) => {
            console.log(error.response);
          })
          // 성공을 하든 실패를 하든 무조건 실행되는 코드
          .finally(() => {});
      }

이 코드는 localhost 3090이 localhost 3095에게 보내는 것이다.

 

        axios
          .post('/api/users', {
            email,
            nickname,
            password,
          })
          // 성공하는 경우
          .then((response) => {
            console.log(response);
          })
          // 실패하는 경우
          .catch((error) => {
            console.log(error.response);
          })
          // 성공을 하든 실패를 하든 무조건 실행되는 코드
          .finally(() => {});

따라서 이렇게 해야 localhost 3095가 3095에게 보낸 것이 된다.

 

=> 하지만 이런 해결 방법은 백엔드와 프론트엔드 모두 localhost일 때 사용 가능하다.