Axios
React 어플리케이션에서 외부 API를 사용할 때, 나타난 에러 현상을 공유하고자 한다.
먼저 react 프로젝트에 axios를 추가해줍니다.
yarn add axios
추가가 되었다면,
import axios from "axios";
//axios version @^0.18.0
const api = axios.create({
baseURL: "https://api.themoviedb.org/3/",
params: {
api_key: "de673xxxxxxxxxxx()",
language: "ko-KR"
}
});먼저 항상 필요한 base가 되는 url과 parameter를 변수로 선언하여 편하게 사용할 수 있도록 하였습니다.
axios.get
export const moviesApi = {
// 파라미터 없는 경우
popular: () => api.get("movie/popular"),
// 파라미터가 있는 경우
movieDetail: id =>
api.get(`movie/${id}`, {
params: {
append_to_response: "videos"
}
}),
}axios.post
export const loginApi = {
validateWithLogin: ({username, password, request_token}) => api.post("authentication/token/validate_with_login", {username, password, request_token}),
createSessionId: (request_token) => api.post("authentication/session/new", {request_token}),
};axios.delete
export const loginApi = {
deleteSessionId: (session_id) => api.delete("authentication/session", {data: {session_id: session_id}}),
};처음엔 post 요청과 동일하게 아래와 같이 요청했지만,
deleteSessionId: (session_id) => api.delete("authentication/session", {session_id})404 에러와 함께 계속 요청 실패가 됬고, 해결했습니다.
delete 요청은 data 속성을 붙여 request config를 요청해줘야 합니다.
axios.delete('<your route>', { data: { <your data> }});해결! 따란!
참고
