微信小程序開發——使用mock數據模擬api請求

前言：

微信小程序開發中，后端提供了接口設計文檔，前端可以先mock數據模擬api請求進行開發調試，而且可以根據需要設計mock文件的格式和內容，這樣在后端接口開發完成之前，前端可以最大限度的完成前端的開發。

編寫mock數據文件：

//mocklist.js
export default {
    //獲取openid(所有登錄方式都需要有)
    getOpenId: {
        s: "0",
        m: "登錄成功",
        uid: "666",
        d: {
            openid: 'ds3fs5f1sd3s5d1f3sdf153'
        }
    },
    //檢驗登錄有效性
    checkToken: {
        s: "0",
        m: "登錄成功",
        uid: "666",
        d: {
            usertoken: 'wefsdik8888888888888888888'
        }
    },
......

為了方便接口請求的異常處理，mock數據中最好帶有接口請求結果的狀態字段，這樣在前期頁面制作、業務邏輯編碼的時候就能把所有情況都進行考慮編碼，這比等待后端提供接口或者臨時編寫demo數據要方便省事的多。

封裝網絡請求：

//request.js
//接口訪問異常統一錯誤提示
const errorToast = function(msg) {
  wx.showToast({
    title: msg || "服務器繁忙，請稍后再試",
    icon: "none"
  })
}

//接口列表（如果接口較多，可以單獨提取到一個js文件中）
const apiList = {
  /*登錄相關*/
  checkToken: 'user/checkToken', //檢查token是否有效
  getSmsCode: 'user/authcode', //獲取驗證碼
  userLogin: 'user/login', //登錄  
  ...... 
}

/**
 * 封裝http 請求方法
 */
const apiUrl ="https://xxx.xxxx.cn/"
const http = (params) => {
  wx.loading()
  //返回promise 對象
  return new Promise((resolve, reject) => {
    wx.request({
      url: apiUrl + params.url,
      data: params.data,
      header: params.header || {
        "Content-Type": "application/x-www-form-urlencoded",
        "usertoken": wx.getStorageSync("usertoken"),
    "uid":(new Date()).getTime()+'_'+Math.floor(Math.random()*100000000)//接口請求流水號
      },
      method: params.method || 'POST',
      success: function(res) {
        wx.hideLoading()
        var data = res.data;
        if (res.statusCode == 200 && data) {
          //需要登錄、后端返回登錄失效代碼，需要自動登錄然后重新加載小程序
          if (!params.noNeedLogin && data.s == 302) {
            wx.removeStorageSync("usertoken")
            wx.removeStorageSync("openid")
            wx.toast('登陸失效，請重新登陸~', () => {
              //登陸失效，跳轉到登陸頁面
              wx.reLaunch({
                url: '../../pages/login/index',
              })
            })
            return;
          }
          //判斷是否需要預處理錯誤信息
          if (params.noPreError) {
            //接口需要單獨處理錯誤信息,直接返回響應信息
            resolve(data)
          } else {
            if (data.s == "0") {
              resolve(data.d)
            } else {
              errorToast(data.m)
              console.log(data)
            }
          }
        } else {
          errorToast();
          console.log(data)
        }
      },
      fail: function(e) {
        errorToast();
        reject(e)
      }
    })
  })
}

/**
 * 封裝mock數據模擬接口請求
 */
import {
  mocklist
} from '../mocklist.js'
const http2 = (params) => {
  return new Promise((resolve, reject) => {
    wx.loading()
    setTimeout(() => {
      for (var key in apiList) {
        if (apiList[key] == params.url) {
          wx.hideLoading()
          var data = mocklist[key]
          //需要登錄、后端返回登錄失效代碼，需要自動登錄然后重新加載小程序
          if (!params.noNeedLogin && data.s == 302) {
            wx.toast('登陸失效，請重新登陸~', () => {
              //登陸失效，跳轉到登陸頁面
              wx.reLaunch({
                url: '../../pages/login/index',
              })
            })
            return;
          }
          //判斷是否需要預處理錯誤信息
          if (params.noPreError) {
            //接口需要單獨處理錯誤信息,直接返回響應信息
            resolve(data)
          } else {
            if (data.s == "0") {
              resolve(data.d)
            } else {
              wx.toast(data.m || "系統繁忙，請稍后重試~")
              console.log(data)
            }
          }
          break;
        }
      }
    }, 500)
  })
}
module.exports = {
  errorToast,
  apiList,
  http:http//http2
}

說明：

1.接口路徑 apiList 如果比較多，可以單獨抽取到一個js中；

2.響應數據預處理：響應數據默認進行預處理，給與統一返回響應值和異常提示；特殊接口根據noPreError、noNeedLogin進行特殊處理（后文會詳細說明）；

3.對於統一返回的數據是用  data 還是 data.d ，則要考慮正常情況下無需返回數據的情況（如對手機號進行驗證，只需要返回正確的響應狀態和提示信息，無需返回數據，即data.d為空），對大部分接口直接返回data.d的好處是頁面中編寫接口請求可以不需要再對data.s進行判斷，直接對返回的data(也就是data.d)進行判斷就好了，如果無需返回數據的接口請求比較少，則直接使用noPreError進行特殊處理就可以了；

4.分別封裝了真實請求（http）和mock請求（http2），而切換也很容易。

//使用mock開發
module.exports = {
  http:http2
}

//后端真實接口聯調
module.exports = {
  http:http
}

對具體接口請求進行封裝：

import {
  errorToast,
  apiList,
  http
} from 'request.js'
/**
 * 導出接口請求
 * noNeedLogin: true 無需登錄
 * noPreError: true 無需預處理錯誤信息
 */
module.exports = {
  errorToast,
  //檢驗用戶登錄有效性
  checkToken(channelid) {
    return http({
      url: apiList.checkToken,
      data: {
        channelid: channelid
      },
      noPreError: true, //無需預處理錯誤信息
      noNeedLogin: true //無需登錄
    })
  },
  //獲取短信驗證碼
  getSmsCode(phone) {
    return http({
      url: apiList.getSmsCode,
      data: {
        phone: phone
      },
      noNeedLogin: true
    })
  },
  ......
}

如上，接口請求封裝配置了接口的地址、參數以及兩個特殊參數：

noPreError：（無需預處理）參數對響應結果進行特殊處理的（特殊異常提示，跳轉等）的接口請求進行標志；

noNeedLogin：無需登陸參數，僅針對無需登陸就能訪問的接口進行配置。