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

§ 封装网络请求及 mock 数据

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java架构沉思录

如何优雅地用Redis实现分布式锁

什么是分布式锁 在学习Java多线程编程的时候,锁是一个很重要也很基础的概念,锁可以看做是多线程情况下访问共享资源的一种线程同步机制。这是对于单进程应用而言的,...

2786
来自专栏行者常至

状态管理-Cookie

783
来自专栏大内老A

.NET Core采用的全新配置系统[8]: 如何实现配置与源文件的同步

配置的同步涉及到两个方面:第一,对原始的配置文件实施监控并在其发生变化之后从新加载配置;第二,配置重新加载之后及时通知应用程序进而使后者能够使用最新的配置。接下...

19210
来自专栏Jack-Cui

Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果

运行平台:Windows Python版本:Python3.x IDE:Sublime text3     上一篇内容,已经学会了使用简单的语句对网页进行抓...

2415
来自专栏码匠的流水账

聊聊spring-boot-starter-data-redis的配置变更

本文主要研究一下spring-boot-starter-data-redis的配置变更

5541
来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(65)-MVC WebApi 用户验证 (1)

前言: WebAPI主要开放数据给手机APP,其他需要得知数据的系统,或者软件应用,所以移动端与系统的数据源往往是相通的。 Web 用户的身份验证,及页面操作权...

3615
来自专栏恰同学骚年

.NET基础拾遗(7)Web Service的开发与应用基础

  Web Service基于SOAP协议,而SOAP本身符合XML语法规范。虽然.NET为Web Service提供了强大的支持,但了解其基本机制对于程序员来...

1002
来自专栏蘑菇先生的技术笔记

Redis分布式锁服务(八)

2725
来自专栏决胜机器学习

Redis专题(九)——Redis管理工具

Redis专题(八) ——Redis管理工具 (原创内容,转载请注明来源,谢谢) 一、安全性 1、运行环境 Redis以简洁为美,其安全性...

3705
来自专栏Linux驱动

45.INIT_WORK()工作队列使用

中断中通过调用schedule_work(work)来通知内核线程,然后中断结束后,再去继续执行work对应的func函数

1021

扫码关注云+社区