首页>问答>javascript>react ajax数据请求如

react ajax数据请求如何处理?

2018-01-30 11:37 分类:javascript
问题描述:
在react开发中,一个页面用到的数据有很多,需要做很多ajax接口请求,是应该一个数据封装成一个函数进行ajax请求,还是将多个ajax请求写在一个函数中合适呢?举例说明一下我的问题:
  // react教程
  fetchMovie = (name) =>{
    const API = '&api_key=72049b7019c79f226fad8eec6e1ee889';
    let movieAPI = '';

    if( this.state.movies.length === 0 ){
      movieAPI = "https://api.themoviedb.org/3/discover/movie?api_key=72049b7019c79f226fad8eec6e1ee889&sort_by=popularity.desc&page=1";
    }else{
      movieAPI = "https://api.themoviedb.org/3/search/movie?page=1&query=" + name + API; // react教程
    }

    $.ajax({
      url: movieAPI,
    }).then(data =>{
      if(data.results.length > 0){
        this.setState({
          movies: data.results
        });
      }

    }).catch(err => {
      console.log("ERROR: " + err);
    })
  }
  React.render();
这个问题一直困扰着我,什么是ajax数据请求比较好的解决方案?
解决方案:
这个要依据你的应用的具体需求和业务逻辑综合考虑,如果业务逻辑比较简单,只是根据某一个条件区别请求不同接口(2-3个接口地址),请求后数据处理逻辑都一样,那么可以将ajax请求封装到一个函数中进行。如果业务逻辑比较复杂,那么根据js设计模式-单一职责链原则,最佳实践是一个函数只做一件事,即一个函数只做一个ajax数据请求,这样有助于模块的解耦,提高程序的内聚性,降低耦合,代码清晰易于维护。代码如下:
function fetchMovieByName(name){ ... }
function fetchMovieListByDate(beginDate, endDate, sort, page){ ... }
function fetchPopularMovieList(sort, page){ ... }
function fetchTopRatedMovieList(sort, page){ ... }

最新教程最新教程 更多>>
html2018-01-31 16:39
css2018-01-31 16:37