小程序对请求封装

需求:在一个页面有三个及多个请求,请求的数据很多都是重复的,让整个页面看起来很臃肿,那个这个时候我们可以对其相似的代码进行抽离;

完整代码地址:https://download.csdn.net/download/qq_40190624/11155381

小程序对请求封装

home.js为首页,network.js为对请求重构的页面,utils/urls.js为对http进行抽离,一共三个相关的页面

小程序对请求封装

先说说urls.js的http的抽离:

const globalUrls={
  // 电影
  movieList:"https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items",
  tvList:'https://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items',
  // 综艺
  showList:'https://m.douban.com/rexxar/api/v2/subject_collection/tv_variety_show/items',
}
export { globalUrls}//导出

network.js进入network.js 并封装三个请求,之后去到Home.js进行引用

import { globalUrls} from '../../utils/urls.js'
const network = {
  getMovieList: function(params) {
    wx.request({ //电影请求
      url: `${globalUrls.movieList}`,
      data:{
        count:7
      },
      success(res) {
        let movies = res.data.subject_collection_items;
        // 如果有值传过来,并且成功,就把结果返回
        if (params && params.success) {
          params.success(movies)
        }
      }
    });
  },
  getTvList: function(params) {
    wx.request({
      url: `${globalUrls.tvList}`,
       data:{
        count:7
      },
      success(res) {
        let tvList = res.data.subject_collection_items;
        if (params && params.success) params.success(tvList)
      }
    });
  },
  getShowList(params){
    wx.request({
      url: `${globalUrls.showList}`,
       data:{
        count:7
      },
      success(res) {
        let showList = res.data.subject_collection_items;
       if(params && params.success) params.success(showList)
      }
    });
  }
}
export {
  network
};

home.js

import {network} from 'network.js'
Page({
  data: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let _this = this;
    // 电影
    network.getMovieList({
      success(movies){
        _this.setData({
          movies
          })
      }
    })
    // 电视剧
    network.getTvList({
      success(tvList){
        _this.setData({
          tvList
        })
      }
    })
    // 综艺
   network.getShowList({
     success(showList){
       _this.setData({
         showList
       })
     }
   })
  }
})