微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据

§ 封装网络请求及 mock 数据

本文配套视频地址:
https://v.qq.com/x/page/i0554...


开始前请把 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);
          }
        })
      })
    }
  }

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

  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 进行修改

  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
  })

iKcamp官网:http://www.ikcamp.com

访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。
包含:文章、视频、源代码

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

iKcamp最新活动

报名地址:http://www.huodongxing.com/ev...

“天天练口语”小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。

原文地址:https://www.cnblogs.com/homehtml/p/12203171.html

时间: 2024-10-24 23:37:21

微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 mock 数据的相关文章

微信小程序教学第四章第二节(含视频):小程序中级实战教程:详情-视图渲染

§ 详情 - 数据渲染 本文配套视频地址:https://v.qq.com/x/page/x0555... 开始前请把 ch4-2 分支中的 code/ 目录导入微信开发工具 这一节中,我们开始详情的接口调用.数据加载和视图渲染过程. Step 1. 引入公用的一些工具库,修改 detail.js: 'use strict'; import util from '../../utils/index'; import config from '../../utils/config'; // WxP

微信小程序教学第三章第四节(含视频):小程序中级实战教程:下拉更新、分享、阅读标识

下拉更新.分享.阅读标识 本文配套视频地址:https://v.qq.com/x/page/h0554... 开始前请把 ch3-4 分支中的 code/ 目录导入微信开发工具 这一篇中,我们把列表这块的剩余功能做完:下拉更新.分享.阅读标识. 下拉更新功能 下拉更新这个功能与我们在第一章中写的小 demo 所用方法一致:onReachBottom. 当用户滚动过程中触发了 上拉 这个动作时候,微信小程序会自动监听到并执行 onReachBottom 这个函数,所以我们只需要把这个监听事件写好就

JAVA学习之Ecplise IDE 使用技巧(2)第二章:键盘小快手,代码辅助

上一篇:JAVA学习之Ecplise IDE 使用技巧(1)第一章:我的地盘我做主,工作空间 第二章:键盘小快手,代码辅助 内容包括: 第一:显示行号 如何设置行号:Ecplice菜单Windows>Preferences>General>Editors>Text Editors>勾掉Show Line Numbers 第二:打造更强大的代码提示 一般.笨的方法是:输入几个字母后按住Alt+/ 如何设置自动提示: 默认配置是: Ecplice菜单Windows>Pref

Prism 文档 第二章 初始化Prism应用程序

                                                                       第二章 初始化Prism应用程序 本章将讨论为了使一个Prism应用程序的启动和运行哪些是必须的.Prism的应用程序在启动过程中需要注册和配置,这被称为引导应用程序. 什么是Bootstrapper? bootstrapper是一个类,通过Prism类库负责一个应用程序建立的初始化.通过使用bootstrapper,对于如何将Prism库组件连接到您的应

李航老师的《统计学习方法》第二章算法的matlab程序

参考了http://blog.sina.com.cn/s/blog_bceeae150102v11v.html#post % 感知机学习算法的原始形式,算法2.1参考李航<统计学习方法>书中第二章的算法P29 close allclear allclcX=[3,3;4,3;1,1];Y=[1,1,-1];%训练数据集及标记learnRate=1;%学习率Omega=zeros(1,size(X,2))b=0 %% ω和b的初值 i=1;k=0;while 1 if Y(i)*(sum(Omeg

【WePY小程序框架实战四】-使用async&amp;await异步请求数据

[WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 [WePY小程序框架实战三]-组件传值 async await 是对promise的近一步优化,既解决了promise链式then的这种写法壁垒,又让异步请求更像同步,若对async await不太了解的同学可以直接参考阮一峰老师的文章async 函数的含义和用法,这里我们只关注怎么在小程序wepy架构中如何使用. 依赖库 import 'wepy-async-function' app.wpy中启用 export

完成构建之法第二章后面的小实践~

练习数值计算.找出一个整数数组中子数组之和的最大值,例如:数组[1,-2,3,5,-1],返回8,因为符合要求的子数组是[3,5]: 程序代码如下,使用的是C语言: #include<stdio.h>int Serch(int a[],int n){ int i,temp; for(i=1;i<n;i++) { if(a[0]<a[i]) { temp=a[0]; a[0]=a[i]; a[i]=temp; } } for(i=2;i<n;i++) { if(a[1]<

我的启蒙--HTML5 第二章 音频视频

音频视频 标签如下 (1)audio音频 (2)video视频 媒体元素属型 controls : 显示或隐藏用户控制界面 autoplay : 媒体是否自动播放 loop : 媒体是否循环播放 currentTime : 开始到播放现在所用的时间 duration : 媒体总时间(只读) volume : 0.0-1.0的音量相对值 muted : 是否静音 paused : 媒体是否暂停(只读) ended : 媒体是否播放完毕(只读) error : 媒体发生错误的时候,返回错误代码 (只

视频编解码:第二章 数字视频

1. 图像与视频 图像:是人对视觉感知的物质再现: 三维自然场景的对象包括:深度.纹理和亮度信息: 二维图像:纹理和亮度信息 视频:连续的图像 视频由多幅图像构成,包含对象的运动信息,又称为运动图像. 2. 数字视频 数字视频:自然场景空间和时间的数字采样表示. 空间采样:解析度(Resolution) 空间采样:帧率/秒 3. 空间采样 二维数字视频图像采样 4. 数字视频系统 采集:照相机,摄像机 处理:编解码器,传输设备 显示:显示器 5. 人类视觉系统HVS HVS:眼睛,神经,大脑 H