Делать несколько запросов API одновременно?

Question

Я создаю что-то в React, которое выполняет вызов выборки для Movie API и отображает список фильмов для пользователя.

По какой-то причине этот конкретный вызов выборки предоставляет действительно базовые результаты для каждого фильма всписок.Но есть другая выборка, которая предоставляет много деталей о конкретном фильме.

Есть ли способ сделать первоначальный вызов API (для списка), в то же время, как и другие вызовы (детали длякаждый фильм), поэтому пользователь видит более подробную информацию из поиска?

РЕДАКТИРОВАТЬ:

handleSubmitMovie() { //This returns the list of 10 movies.
if (this.state.inputTitle) { //If the user has input something.
    fetch(
        url + `/` +
        // searchParam + this.state.inputTitle + 
        `?s=${this.state.inputTitle}` +
        `&type=${this.state.selectType}` +
        `&page=${this.state.currPage}` +
        `&apikey=` + apiKey
        )
      .then(res => {
        if(res.ok) { //If API call is successful, return JSON file.
            return res.json();
        } else { //Else throw an Error.
            throw Error(`Request rejected with status ${res.status}`);
        }
      })
      .then(data => { //JSON file is represented by data.
            if (data.Response === "True") { //If matching movie(s) were found.
                for (let x=0; x < data.Search.length; x++) { //Runs for each record returned.
                    this.fullMovieSummary(data.Search[x].imdbID); //Calls fullMovieSummary with current record's imdbID.
                }

                this.setState({
                    moviesList: data
                })
            } else { //Else no matching movie(s) were found.
                this.setState({
                    moviesList: '',
                    movieData: ''
                })
            }
          })
          .catch(console.error);
    } else { //Else the user has input nothing.
        this.setState({
            moviesList: '',
            movieData: ''
        })
    }
}


fullMovieSummary(currMovieID) { //This provides full details on a single movie.
    fetch(
    url + `/` +
    `?i=${currMovieID}` +
    `&apikey=` + apiKey
    )

    .then(res => {
        if(res.ok) { //If API call is successful, return JSON file.
            return res.json();
        } else { //Else throw an Error.
            throw Error(`Request rejected with status ${res.status}`);
        }
      })
    .then(data => { //JSON file is represented by data.
        if (data.Response === "True") { //If matching movie(s) were found.  
            this.setState(
                {
                    movieData:[...this.state.movieData, data]
                }
            )
        } else { //Else no matching movie(s) were found.
            this.setState({
                movieData: ''
            })
        }
      })
    .catch(console.error);
}

Answer 1

Это невозможно без изменения API или реализации собственного. Я проделал аналогичную работу, добавив graphql API к своему приложению, которое выполняет запросы к серверу. Graphql был разработан для этой конкретной цели, запрашивая несколько конечных точек в одном сетевом запросе. В моей предложенной реализации это не устраняет необходимость в нескольких запросах, но перемещает эти несколько запросов на сервер, чтобы они были прозрачны для внешнего интерфейса.

Предположим, у вашего api фильма есть 2 конечные точки:

GET /movies/   // list all the movies names, year released, and rotten tomatoes score
GET /movie/details?{movie}   // get the details about one movie in particular

Вы можете получить эти данные, используя один сетевой запрос от внешнего интерфейса, используя запрос graphql, подобный этому

query {
  movie {
    name
    score
    released
    details {
        starring
        director
        producer
        quotes
        trivia
    }
  } 
}

Точно, как реализовать graphql на вашем конкретном бэкэнде, выходит за рамки этого обсуждения, но, по сути, вам нужен распознаватель, который будет запрашивать две конечные точки и объединять их вместе в одном ответе. Я хочу быть настолько ясным, насколько это возможно, что у вас все еще есть 2 сетевых запроса, происходящих в этой модели (3 фактически считая одного, сделанного клиентом), но только один запрос зависит от сетевого подключения ваших пользователей. Другие 2 происходят на уровне сервера. Это делает graphql идеальным для ситуаций с ограниченной пропускной способностью и ситуаций, когда ваше приложение зависит от многих API / конечных точек

Если вам интересно, я предлагаю вам проверить их веб-сайт

Answer 2

Если вы не знаете, какие элементы будут в списке, вы не сможете сделать подробный запрос API, пока не сделаете запрос на список.

Это сложночтобы сказать, но я думаю, что вы хотите сделать, это взять возвращаемое значение выборки списка, и пройти по нему и запросить подробную информацию для каждой записи.lmk, если это полезно, или если вы обновились, чтобы предоставить больше информации по проблеме.