zoukankan      html  css  js  c++  java
  • 微信小程序开发——使用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:无需登陆参数,仅针对无需登陆就能访问的接口进行配置。

  • 相关阅读:
    库存回滚架构设计原则
    老人血脂高吃什么好
    旁边的旁边的旁边--纪念自己逝去的青春
    JAVA8 Map新方法:compute,computeIfAbsent,putIfAbsent与put的区别
    新晋总监生存指南终章——构建技术团队信息通道
    新晋总监生存指南五——人才运营机制,技术团队如何解决造血能力
    新晋总监生存指南四——项目执行指南,如何挽救混乱的项目
    新晋总监生存指南三——OKR,先进的管理工具
    新晋总监生存指南二——建立指标
    新晋总监生存指南开篇之总监二三事
  • 原文地址:https://www.cnblogs.com/xyyt/p/10643169.html
Copyright © 2011-2022 走看看