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或实现自己的API是不可能的。我通过向我的应用程序中添加一个graphql API来完成类似的工作，该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 /端点的情况

如果您有兴趣，建议您结帐他们的website

Answer 2

如果您不知道列表中将包含哪些项目，将无法发出详细的api请求，除非您已经请求了列表。

这很难说，但是我认为您想要做的是获取列表提取的返回值，并遍历列表的每个请求详细信息。 lmk，如果有帮助，或者您已更新以提供有关此问题的更多信息。

一次发出多个API请求？

2 个答案: