[movie_app_6] ajax

ajax(Asynchronous JavaScript and XML)

-하지만 xml보다 json포맷이 중요하게 여겨진다

-json(javascript object notation) : 오브젝트를 자바스트립트로 작성하는 기법

ajax를 리액트에 적용하는 방법 : fetch 덕분에 심플해졌다

fetch request 만들기 : url(from api) 을 통해 get하는 방식

메타데이터 대신 url을 불러올 수 있게 수정

componentDidMount(){

fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating');

}

promise 새로운 자바스크립트 컨셉 : 비동기적 프로그래밍

비동기적? 전의 작업이 종료되지 않아도 다음 작업이 요청되고 전의 작업이 끝나면 실행됨

-계속 다른 작업을 스케쥴해놓을 수 있는 장점

promise는 시나리오를 잡는 방법을 만들어준다

componentDidMount(){

fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')

.then(response => response.json()) //fetch를 실행한 뒤 결과물, json형태로 바꿔준다

.then(json => console.log(json))

.catch(err => console.log(err)) //에러가 발생하면 잡아줌

}

await, async

먼저, 함수를 분리해준다.

componentDidMount(){

this._getMovies();

}

_getMovies = async () => {

}

_callApi = () => {

fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')

.then(response => response.json()) //fetch를 실행한 뒤 결과물, json형태로 바꿔준다

.then(json => console.log(json))

.catch(err => console.log(err)) //에러가 발생하면 잡아줌

}

await 사용

componentDidMount(){

this._getMovies();

}

_renderMovies = () => {

const movies = this.state.movies.map((movie, index) => {

return <Movie title={movie.title} poster={movie.large_cover_image} key={index} />

})

return movies;

}

_getMovies = async () => {

const movies = await this._callApi(); //callApi기능이 끝나는 것을 기다리고 return값을 movies에 저장

this.setState({ //callApi 작업이 완료되기 전까지는 실행되지 않음

movies

})

}

_callApi = () => {

return fetch('https://yts.am/api/v2/list_movies.json?sort_by=rating')

.then(response => response.json()) //fetch를 실행한 뒤 결과물, json형태로 바꿔준다

.then(json => json.data.movies)

.catch(err => console.log(err)) //에러가 발생하면 잡아줌

}