封装网络请求以及mock数据

§ 封装网络请求及 mock 数据

开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具

上一节中，我们对 index.js 文件中增加了 util 对象，并在对象中封装了很多公用方法

let util = {
  log(){……},
  alert(){……},
  getStorageData(){……},
  setStorageData(){……}
}

上面是定义了四个方法

本节中，我们对常用的网络请求方法 wx.request 进行封装

 let util = {
    // 此处省略部分代码
    request(opt){
      let {url, data, header, method, dataType} = opt
      let self = this
      return new Promise((resolve, reject)=>{
        wx.request({
          url: url,
          data: data,
          header: header,
          method: method,
          dataType: dataType,
          success: function (res) {
            if (res && res.statusCode == 200 && res.data) {
              resolve(res.data);
            } else {
              self.alert('提示', res);
              reject(res);
            }
          },
          fail: function (err) {
            self.log(err);
            self.alert('提示', err);
            reject(err);
          }
        })
      })
    }
  }

opt 对象拆解
箭头函数这里相当于匿名函数，传入resolve和reject，然后返回一个wx.request所发起的网络请求并传入到Promise里面再作为一个对象返回

对于请求的参数，我们设置下默认值，方便调用

  const DEFAULT_REQUEST_OPTIONS = {
    url: '',
    data: {},
    header: {
      "Content-Type": "application/json"
    },
    method: 'GET',
    dataType: 'json'
  }

  let util = {
    // 此处省略部分代码
    request (opt){
      let options = Object.assign({}, DEFAULT_REQUEST_OPTIONS, opt)
      let {url, data, header, method, dataType, mock = false} = options
      let self = this
      // 此处省略部分代码 
    }
  }

对于请求的参数，我们设置下默认值，方便调用

对象方法Object.assign()

Object.assign方法用于对象的合并，将源对象（ source ）的所有可枚举属性，复制到目标对象（ target ）

Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。

注意，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性。

var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

所以这里就是设置默认值的作用

如果是本地开发调试，需要增加我们的 mock 假数据，对 util.request 进行修改

  let util = {
    // 此处省略部分代码
    request (opt){
      let options = Object.assign({}, DEFAULT_REQUEST_OPTIONS, opt)
      let {url, data, header, method, dataType, mock = false} = options
      let self = this
      return new Promise((resolve, reject)=>{
        if(mock){
          let res = {
            statusCode: 200,
            data: Mock[url]
          }
          if (res && res.statusCode == 200 && res.data) {
            resolve(res.data);
          } else {
            self.alert('提示', res);
            reject(res);
          }
        }else{
          wx.request({
            url: url,
            data: data,
            header: header,
            method: method,
            dataType: dataType,
            success: function (res) {
              if (res && res.statusCode == 200 && res.data) {
                resolve(res.data);
              } else {
                self.alert('提示', res);
                reject(res);
              }
            },
            fail: function (err) {
              self.log(err);
              self.alert('提示', err);
              reject(err);
            }
          })   
        }
      })
      
    }
  }

如果请求接口调用时候，包含有参数 mock = true，会自动调用相应的 mock 数据，如果没有这个参数，就走正常流程去调数据。

调用方法如下：

  util.request({
    url: 'list',
    mock: true,
    data: {
      tag:'微信热门',
      start: 1,
      days: 3,
      pageSize: 5,
      langs: 'en'
    }
  }).then(res => {
    // do something
  })