axios interceptor

환경정보로 빼기

.env파일 만들고 저장!

REACT_APP_SERVER_URL=http://localhost:주소번호(ex.4005)

 원래 있던 URL대신 (`${process.env.REACT_APP_SERVER_URL}/todos`) 입력한다.

// 조회 함수
  // 비동기 함수 : 서버(json-server)에 todos를 요청하는 함수
  const fatchTodos = async () => {
    //const {data} = await axios.get("http://localhost:번호/todos")
    //console.log('data', data)
    const {data} = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`)
    setTodos(data)
  };

 

 

axios폴더 > api.js파일 만들고 저장!

import axios from "axios";

const instence = axios.create({

    baseURL: process.env.REACT_APP_SERVER_URL,

})

export default instence;

axios를 api로  바꾸고 괄호안에 ("/todos")로 변경하면 된다.

const fatchTodos = async () => {
    // 1. const {data} = await axios.get("http://localhost:번호/todos")
    // console.log('data', data)
    // 2. const {data} = await axios.get(`${process.env.REACT_APP_SERVER_URL}/todos`)
    // setTodos(data)
    const {data} = await api.get("/todos")
    setTodos(data)
  };

이제는 가공한 인스턴스를 조금 더 interceptor를 이용해서 좀 더 요청과 응답 사이에 관여해보자~~

request와 response 사이에 어떤 로직들을 넣겠다.

instence.interceptors.request.use(

    // 요청을 보내기 전 수행되는 함수
    function(config){
        console.log('인터셉터 요청 성공!')
        return config;
    },

    // 오류 요청을 보내기 전 수행되는 함수
    function(error){
        console.log('인터셉트 요청 오류!')
        return Promise.reject(error);
    },
)

instence.interceptors.request.use(

    // 응답을 내보내기 전 수행되는 함수
    function(response){
        console.log('인터셉터 응답 받았습니다!')
        return response;
    },

    // 오류 응답을 내보내기 전 수행되는 함수
    function(error){
        console.log('인터셉터 응답 오류 발생!')
        return Promise.reject(error);
    },
)

인자는 항상 (config)라는 인자를 받는다. 매개변수로 들어오는 이름은 상관없다.

오류 함수 return에 Promise.reject를 꼭 해줘야 한다.

인터셉터 요청, 응답 성공

컴포넌트가 렌더링 되면서 fetchTodos가 실행이 되면서 axios를 콜 한다. 그러면서 requset를 하게 됩니다.

이렇게 중간에서 어떤 인터셉터가 HTTP 요청을 가로채서 어떠한 작업을 하는 것이다.

강제로 실패시키기

timeout이란?

axios 콜을 했을 때, 서버에 통신을 요청하면 '나는 언제까지 기다린다'라는 초(ms)를 말한다.

예를 들면 '2초까지 기다릴거야'라고 했을 때 2(0.002ms->2000을 적어줘야 2초가 됨)초를 기다렸는데도 안오면 오류를 내버리는 기준을 말한다.

const instence = axios.create({

    baseURL: process.env.REACT_APP_SERVER_URL,

    timeout: 1,

})

이렇게 변경하면, 요청 타임아웃이 1ms이다. 엄청 짧은 시간,,

뭐야 응답받으면 안되는데;;  왜 오류메세지는 떠...?