资讯专栏INFORMATION COLUMN

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

wqj97 / 1761人阅读

摘要:调用方法如下微信热门官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。

§ 封装网络请求及 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.ucloud.cn/yun/115579.html

相关文章

  • 程序教学二章视频):程序中级实战教程预备 - 封装网络请求 mock 数据

    摘要:调用方法如下微信热门官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 § 封装网络请求及 mock 数据 本文配套视频地址:https://v.qq.com/x/page/i0554... 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具 上一节中,我们对 index.js 文件中增加了 util 对象,并在对象...

    zhigoo 评论0 收藏0
  • 程序教学二章视频):程序中级实战教程预备 - 封装网络请求 mock 数据

    摘要:调用方法如下微信热门官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 § 封装网络请求及 mock 数据 本文配套视频地址:https://v.qq.com/x/page/i0554... 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具 上一节中,我们对 index.js 文件中增加了 util 对象,并在对象...

    morgan 评论0 收藏0
  • iKcamp出品程序教学共5章16节汇总(视频)

    摘要:微信小程序课程,面向所有具备前端基础知识的同学阅读要求读者需要具备但不限于以下技能更佳一共四部分十五小节,适合七天的训练营。 ?? 微信小程序课程,面向所有具备前端基础知识的同学 ?? 阅读要求 读者需要具备但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小节,适合七天的训练营。 从现在开始,我假装你已经掌握了 html、 css以及 ES6...

    elliott_hu 评论0 收藏0
  • iKcamp出品程序教学共5章16节汇总(视频)

    摘要:微信小程序课程,面向所有具备前端基础知识的同学阅读要求读者需要具备但不限于以下技能更佳一共四部分十五小节,适合七天的训练营。 ?? 微信小程序课程,面向所有具备前端基础知识的同学 ?? 阅读要求 读者需要具备但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小节,适合七天的训练营。 从现在开始,我假装你已经掌握了 html、 css以及 ES6...

    paney129 评论0 收藏0
  • iKcamp出品程序教学共5章16节汇总(视频)

    摘要:微信小程序课程,面向所有具备前端基础知识的同学阅读要求读者需要具备但不限于以下技能更佳一共四部分十五小节,适合七天的训练营。 ?? 微信小程序课程,面向所有具备前端基础知识的同学 ?? 阅读要求 读者需要具备但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小节,适合七天的训练营。 从现在开始,我假装你已经掌握了 html、 css以及 ES6...

    lmxdawn 评论0 收藏0

发表评论

0条评论

wqj97

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<