Error가 나타났다!
Uncaught (in promise) TypeError: Failed to execute 'json' on 'Response': Illegal invocation at basicStateReducer
데이터를 찍어보고, 구글링을 해보니 json() 화를 안했다는 말이었다.
어..근데 나 분명 json() 작성했는데?! 생각하며 찬찬히 다시 본 결과, await을 두 번 감싸면서 첫 번째 괄호에 .json() 한 실수를 발견했다.
얕게 공부한 결과라고 생각하며 이번 실수를 제대로 볼 기회로 여기기로 했다.
async- await
.json() 화 해주는 이유는 ?
fetch를 사용할 경우 응답받은 body 데이터의 form을 직접 바꿔줘야 한다.
response 의 stream 데이터 타입을 가져오고, .json()을 사용해서 텍스트를 Promise 형태로 반환한다.
Promise는 또 뭐였지?
Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. -MDN-
따라서 async - await 비동기 작업의 결과값을 사용하기 위해 Promise 형태로 바꿔줘야 한다는 것이다!
이렇게 따로 쓰던가.!
const [movies, setMovies] = useState([]);
const getMovies = async () => {
const response = await fetch(
`https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
);
const json = await response.json();
setMovies(json.data);
setLoading(false);
};한번에 나타내주던가!
const [movies, setMovies] = useState([]);
const getMovies = async () => {
const json = await (
await fetch(
`https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year`
)
).json();
setMovies(json.data.movies);
setLoading(false);
};쓰기가 게을르다면 이런 형태로 받으라는 결론이다. 👌
const getMovies = async () => {
const response = await (await fetch(`URL주소`)).json();
};
초록색 귤이 노랑색으로 익어가듯, 실력이 익어가기 위해 노력하는 개발자 lahee입니다. 프론트엔드 개발자를 목표로 성장하고 있습니다.