微信小程序教學第二章（含視頻）：小程序中級實戰教程之預備篇 - 封裝網絡請求及 mock 數據

時間 2019-11-30

標籤微信程序教學第二視頻中級實戰教程預備封裝網絡請求 mock 數據欄目軟件設計简体版

原文原文鏈接

§ 封裝網絡請求及 mock 數據

本文配套視頻地址： v.qq.com/x/page/i055…html

開始前請把 ch2-3 分支中的 code/ 目錄導入微信開發工具前端

上一節中，咱們對 index.js 文件中增長了 util 對象，並在對象中封裝了不少公用方法json

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);
          }
        })
      })
    }
  }
複製代碼

對於請求的參數，咱們設置下默認值，方便調用微信小程序

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
      // 此處省略部分代碼 
    }
  }
複製代碼

若是是本地開發調試，須要增長咱們的 mock 假數據，對 util.request 進行修改api

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
  })
複製代碼