movie.js 의 actions 에서 사용된 OMDbapi 에서 받아온 결과물에서의
totalResult 는 string 이다.
영화 목록을 10개, 20개, 30개 씩 요청할 때, 반복해서 요청 하는것을 만들어 보자.
//movie.js
actions: {
async searchMovies({ commit, state }, payload) {
const { title, type, number, year } = payload
const OMDB_API_KEY = '7035c60c'
const res = await axios.get(`https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${title}&type=${type}&y=${year}&page=1`)
const { Search, totalResults } = res.data
commit('updateState', {
movies: Search,
})
console.log(totalResults) // 264
console.log(typeof totalResults) // string
const total = parseInt(totalResults, 10)
// 264 / 10 = 26.4. ceil 로 올림처리
const pageLength = Math.ceil(total / 10)
// 추가 요청하자!
if(pageLength > 1) {
for(let page = 2; page <= pageLength; page++) {
if(page > (number /10)) break
const res = await axios.get(`https://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${title}&type=${type}&y=${year}&page=${page}`)
const { Search } = res.data
commit('updateState', {
movies: [...state.movies, ...Search]
})
}
}
}
}