API 데이터 활용 로직

영화검색할 때 page를 결정하는 로직

• 검색시 10개, 20개, 30개의 데이터를 볼 수 있음
• 한 페이지에 10개의 데이터가 출력됨

async searchMovies({ state, commit }, payload) {
      const { title, type, year, number } = payload
      const OMDB_API_KEY = '12345'
      const res = await axios.get(
        `http://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${title}&type=${type}&y=${year}&page=1`
      )
      const { Search, totalResults } = res.data

      const total = parseInt(totalResults, 10)
      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(
            `http://www.omdbapi.com/?apikey=${OMDB_API_KEY}&s=${title}&type=${type}&y=${year}&page=${page}`
          )
          const { Search } = res.data
          commit('updateState', {
            movies: [...state.movies, ..._uniqBy(Search, 'imdbID')]
          })![](https://velog.velcdn.com/images/zerone/post/9503eb35-1cbb-440d-b70c-b18b87428fad/image.png)

        }
      }

• 353개의 결과가 나올 경우 10개가 한 페이지이기 때문에 10으로 나눠 준다.
• 35.3 페이지가 나오는데 Math.ceil()를 통해 올림을 한다. // 35 페이지
• 최대 30개 까지의 결과물을 보여주기 위해 if 문으로 page 값이 number(10개, 20개 혹은 30개) 보다 클 경우 반복문 탈출
• 결국 최대 3페이지 밖에 나올 수 없다. number 값이 30이 최대이므로..!