Axios

 

Axios는 프로미스 객체를 반환하고, response data는 프로미스 객체안에 Data Property안에 들어있습니다.

error가 발생하면 error.response로 반환이됩니다. 우리가 get 요청해서 받는 데이터는 data안에 들어있다고 보면되고, 요청에 대한 code코드나 헤더 정보, 그외 다른 다양한 정보도 돌려주는데 Axios는 특히 네트워크 에러 외 다른 다양한 에러도 알아서 뱉어주기 때문에 더 편하다고 합니다. ㅎ 

 

Axios Response

const fetchData = async () => {
    try {
      const response = await axios(url); // Get Request
      const data = response.data; // Response안 데이터 분해  
      console.log(data); // 테스트 출력
    } catch (error) {
      console.log(error.response); // error시 에러 메세지 출력 
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

 

Axios는 Get 요청에서는 두번째 파라미터로, Post 요청에서는 세번째 파라미터로써 Headers를 넣을 수 있다. 찾아보니까 config Object라고 크게 통틀어 부르는 것 같고, 그리고 Application 손아귀에서 벗어나는 요청들은 서버의 필요에 따라 Header들이 접근을 위해서 필요한거 같다.

 

const fetchDadJoke = async () => {
  try {
    const { data } = await axios(url, {
      headers: {        // 두번째 파라미터로 headers obj를 넣어준다. 
        Accept: 'application/json',
      },
    });
    // console.log(data);
    setJoke(data.joke);
  } catch (error) {
    console.log(error.response);
  }
};

https://blog.logrocket.com/using-axios-set-request-headers/

Using Axios to set request headers - LogRocket Blog

 

 

Post Request  두번째 인자로 data 객체에 담아서 넘겨주고 잘 넘어갔는지 확인해보자 

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const resp = await axios.post(url, { name: name, email: email });
      console.log(resp.data);
    } catch (error) {
      console.log(error.response);
    }
    setName('');
    setEmail('');
  };

dev tool-network 탭에서 값 확인

 

Global Instance 

 

하지만 항상 Axios 요청할때 header값을 일일이 넣어줄 수 없는  일이다. 이럴때는 Axios에 Default Config값을 넣어주면 되는데, 항상 쓰게 되는 URL이나 Header를  따로 폴더 및 파일 만들어서 정리해주면 Axios로 요청할때 기본적으로 저 config값들이 들어가게 된다. 

import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

https://axios-http.com/kr/docs/config_defaults

Config 기본값 | Axios Docs

 

하지만 우리가 한 URL에만 요청을 하는게 아니라면 이런방식으로는 한계가 있다는 걸 금방 알 수 있다. 그럴 경우에는 Custom Instance를 만들어서 사용하면된다. 

 

import axios from 'axios';

const authFetch = axios.create({
  baseURL: 'https://course-api.com',
  headers: {
    Accept: 'application/json',
  },
});

export default authFetch;

여기서나는 authFetch라는 간단한 Custom Instance를 axios.create 메소드를 통해 만들었다. 보통은 baseURL Detail Path를 넣어주고 저 Custom Instance를 통해 호출할때 Root URL을 넣어줘서 좀 더 Flexible하게 사용한다고 한다. 그리고 좀 더 보안적으로 예민한 부분이 있다면 Custom Instance가 맞는 방향인거 같다. 

authFetch('/react-store-products');

 

 

Interceptor

인터셉터라는것도 있는데,  말 그대로 가로채는 놈인데, 요청 할때와 응답 받을때 먼저 어떠한 작업을 추가하거나 할 수 있다. 약간 redux의 middleware같은 느낌이랄까( 완전 주관적인 나의 생각 ) 

 

import axios from 'axios';

const authFetch = axios.create({
  baseURL: 'https://course-api.com',
});

authFetch.interceptors.request.use(
  (request) => {
    request.headers.common['Accept'] = 'application/json';
    console.log('request sent');
    return request;
  },
  (error) => {
    return Promise.reject(error);
  }
);

authFetch.interceptors.response.use(
  (response) => {
    console.log('got response');
    return response;
  },
  (error) => {
    console.log(error.response);
  }
);

export default authFetch;

authFetch.interceptors.request.use

request하는 인스턴스에 'Accept' 헤더를 넣어주고 'request sent'를 출력하고, 다시 갈길을 보내준다. 하지만 error가 나면 바로 Promise의 reject를 반환해서 요청을 끝내준다. 요점은 request가 서버로 가기 직전에 작업을 실행해준다고 생각하면 될 거 같다. 

 

authFetch.interceptors.response.use

응답값을 받고 .then부분으로 넘어가기 전에 이 인터셉터에서 어떠한 작업을 해주는데, 그 응답값을 가지고 어떤 처리를 하고 then으로 보내줄 수 있고, 예를 들면 가져오긴 가져왔는데, 데이터가 0이라서 No Result라던가, 그런 처리를 이쪽에서 먼저 해줄 수가 있을것 같다.