Axios
axios는 node.js와 브라우저를 위한 Promise 기반 http 클라이언트이다.
즉, http를 이용해서 서버와 통신하기 위해 사용하는 패키지이다.
yarn add axios패키지를 다음과 같이 설치하면 바로 사용가능하다!
GET, POST, PATCH, DELETE 등 메서드가 있다.
axios.get('url')
axios.post('url', todo)
axios.delete(`url/${id값}`)위와 같은 방식으로 사용할 수 있다.
Axios Interceptor
instance.interceptors.request.use(
function (config) {
// 요청을 보내기 전 수행
console.log("인터셉트 요청 성공!");
return config;
},
function (error) {
// 오류 요청을 보내기 전 수행
console.log("인터셉트 요청 오류!");
return Promise.reject(error);
}
);인터셉터를 사용하면 서버에 요청할 때 특정한 일을 수행하게 할 수 있다.
다양한 부분에 적용할 수 있다고는 하지만,
지금은 아직 에러가 발생했을 때 말고는 사용할 수 있는 곳이 생각나질 않는다!
Redux Thunk
리덕스에서 많이 사용하고 있는 미들웨어
dispatch(객체)가 아닌 dispatch(함수)를 할 수 있게 해준다.
redux toolkit에서 제공하는 api이다.
export const __addNumber = createAsyncThunk(
// 첫번째 인자 : action value
"addNumber",
// 두번째 인자 : 콜백함수
(payload, thunkAPI) => {
setTimeout(() => {
thunkAPI.dispatch(addNumber(payload));
}, 3000);
}
);위의 예시처럼 사용하면 된다!
먼저 creatAsyncThunk API를 통해서 thunk 함수를 생성한다.
인자는 두개를 받는데, 하나는 action value 다른 하나는 함수다!!
두번째 인자인 함수에서 dipatch(객체)를 하기 전에 수행할 동작을 넣어주면 된다!
위의 예시는 3초 후에 dispatch가 일어나도록 하는 콜백함수를 인자로 넣어준 것이다.
즉, 리덕스 미들웨어를 사용하면, 액션이 리듀서로 전달되기 전에 특정한 작업을 실행하도록 할 수 있다.
