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

相关文章

来自专栏极客编程

Python超级明星WEB开发框架Flask简明教程

和Django大包大揽不同,Flask建立于一系列的开源软件包之上,这其中 最主要的是WSGI应用开发库Werkzeug和模板引擎Jinja:

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

【AngularJS】—— 7 模块化

AngularJS有几大特性,比如:   1 MVC 2 模块化   3 指令系统   4 双向数据绑定 那么本篇就来看看AngularJS的模块...

1885
来自专栏一直在跳坑然后爬坑

里程表式跑马灯自定义控件

https://github.com/nelson1110/MarqueeView

832
来自专栏coding...

swift3.0 基础练习-实现99乘法表

593
来自专栏技术/开源

从C#到TypeScript - 装饰器

从C#到TypeScript - 装饰器 在C#里面如果想要不直接修改类或方法,但给类或方法添加一些额外的信息或功能,可以想到用Attribute,这是一个十分...

20310
来自专栏HTML5学堂

HTML5-类库系列 补讲AJAX

HTML5学堂:AJAX主要是两个兼容问题,其一是AJAX请求的创建,其二是加载状态的检测。本文主要讲解AJAX兼容的方法的搭建。 AJAX请求的创建 大部分使...

2645
来自专栏前端儿

在浏览器客户端进行爬虫开发

在Node环境下,可以用Request模块请求一个地址,得到返回信息,再用正则匹配数据,或者用Cheerio模块包装-方便定位相关的标签项

1381
来自专栏刺客博客

使用sed命令在两行匹配之间插入一行新内容

在这两个之间插入一行liming。 解决办法: 查了一下sed的用法貌似可以试一下,看到命令n可以读入下一行到pattern space,就可一匹配完前一行...

792
来自专栏Python小屋

Python编程中一定要注意的那些“坑”(一)

1 逗号不是运算符,只是个普通的分隔符 >>> x = 3, 5 >>> x (3, 5) >>> x == 3, 5 (False, 5) >>> 1, 2...

3045
来自专栏JetpropelledSnake

Python面试题之Python反射详解

解释Python的反射,先提一个简单的需求,现在我有一个简易的网站,由两个文件组成,一个是具体执行操作的commons.py文件,一个是入口文件index.py...

742

扫码关注云+社区