微信小程序教学第二章(含视频):小程序中级实战教程之预备篇 - 封装网络请求及 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 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

渐进式Web应用(PWA)入门教程(下)

渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的...

640
来自专栏IMWeb前端团队

跨平台web调试代理工具--whistle

whistle是基于Node实现的跨平台web调试代理工具,支持windows、mac、linux等所有安装了Node的操作系统,可以部署在本地机器、虚拟机或远...

1966
来自专栏开源项目

Git 项目推荐 | html5 异步批量上传插件

使用html5的ajax批量上传的工具 。 插件描述: javascript异步上传插件,包含3个子项目BUpload, JUpload, TUpload. ...

37313
来自专栏FreeBuf

htcap:一款实用的递归型Web漏洞扫描工具

今天给大家介绍的是一款名叫 htcap 的开源 Web 漏洞扫描工具,它通过拦截 AJAX 调用和页面 DOM 结构的变化并采用递归的形式来爬取单页面应用(SP...

2553
来自专栏听雨堂

服务器端加入自动运行的JS代码

          本来不是一个很复杂的事情,就是想通过服务器的代码,控制客户端加载时运行一个js函数。却折腾了一个早上,首先是用           page...

19510
来自专栏听雨堂

动态加载控件

参考文章:http://blog.csdn.net/yicko/archive/2005/04/16/349740.aspx 1、加载的是普通的控件,不是用户控...

1727
来自专栏vue学习

22、商品列表页

(3)商品列表 对于商品列表我们可以把里面的单个商品item用封装成一个组件从而实现复用。

1023
来自专栏Gcaufy的专栏

打造小程序组件化开发框架

这篇主要介绍在使用小程序数月之后,结合自己的开发习惯,总结出一套支持组件化的开发框架。希望对大家使用 WePY 有所帮助。

3.3K1
来自专栏博客园

Asp.Net Web API(一)

          HTTP不仅仅服务于Web Pages。他也是一个创建展示服务和数据的API的强大平台。HTTP是简单的,灵活的,无处不在的。你能够想象到几...

1114
来自专栏xingoo, 一个梦想做发明家的程序员

[logstash-input-http] 插件使用详解

插件介绍 Http插件是2.0版本才出现的新插件,1.x是没有这个插件的。这个插件可以帮助logstash接收其他主机或者本机发送的http报文。 插件的原理很...

2398

扫码关注云+社区