同一页面对不同数据的不同请求，React (No Redux)答案

【问题标题】：Different request for different data from API in the same page, React (No Redux)同一页面对不同数据的不同请求，React (No Redux)
【发布时间】：2018-01-29 22:58:44
【问题描述】：

要从 API 获取不同的数据，我应该使用不同的请求还是一次获取来更改变量？我浏览了互联网，答案/建议几乎都是针对 PHP 的，我不太了解这种语言。因此，我在这里寻求建议/答案。

这是我目前的代码：

//fetching movie
  fetchMovie = (name) =>{
    const API = '&api_key=72049b7019c79f226fad8eec6e1ee889';
    let movieAPI = '';

    //if the length of the movies is equal to zero fetch default search
    if( this.state.movies.length === 0 ){
      movieAPI = "https://api.themoviedb.org/3/discover/movie?api_key=72049b7019c79f226fad8eec6e1ee889&sort_by=popularity.desc&page=1";
    }else{
      //search the movie name
      movieAPI = "https://api.themoviedb.org/3/search/movie?page=1&query=" + name + API;
    }


    //make request
    const req = new Request(movieAPI, {
      method: 'GET',
      cache: 'default'
    });

    fetch(req).then(response =>{
      return response.json();
    }).then(data =>{
      //if data fetched result is greater than 0
      if(data.results.length > 0){
        this.setState({
          movies: data.results
        });
      }

    }).catch(err => {
      console.log("ERROR: " + err);
    })
  }

现在要解释一下我想了解的是：从上面的代码可以看出，我只能做一个默认的请求数据或按名称。现在，如果我想获取不同的查询，我应该为每个查询编写不同的代码还是重用代码：

movieAPI = "https://api.themoviedb.org/3/"+ variable +"/movie?api_key=72049b7019c79f226fad8eec6e1ee889&date="+ date +"&name=" +name + "&otherQuery=" + query ;

【问题讨论】：

标签： javascript reactjs api fetch

【解决方案1】：

这实际上取决于您的应用将如何处理这些数据。

我建议您为您的应用将获取的每种类型的数据创建多个函数，如下所示：

function fetchMovieByName(name){ ... }
function fetchMovieListByDate(beginDate, endDate, sort, page){ ... }
function fetchPopularMovieList(sort, page){ ... }
function fetchTopRatedMovieList(sort, page){ ... }

它会更简洁，更容易理解您的代码。

如果您想减少请求，您可以获取一个列表，然后将其存储并在客户端进行搜索/过滤等操作...

【讨论】：