资讯专栏INFORMATION COLUMN

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

morgan / 604人阅读

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

§ 封装网络请求及 mock 数据

</>复制代码

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


</>复制代码

  1. 开始前请把 ch2-3 分支中的 code/ 目录导入微信开发工具

上一节中,我们对 index.js 文件中增加了 util 对象,并在对象中封装了很多公用方法

</>复制代码

  1. let util = {
  2. log(){……},
  3. alert(){……},
  4. getStorageData(){……},
  5. setStorageData(){……}
  6. }

本节中,我们对常用的网络请求方法 wx.request 进行封装

</>复制代码

  1. let util = {
  2. // 此处省略部分代码
  3. request(opt){
  4. let {url, data, header, method, dataType} = opt
  5. let self = this
  6. return new Promise((resolve, reject)=>{
  7. wx.request({
  8. url: url,
  9. data: data,
  10. header: header,
  11. method: method,
  12. dataType: dataType,
  13. success: function (res) {
  14. if (res && res.statusCode == 200 && res.data) {
  15. resolve(res.data);
  16. } else {
  17. self.alert("提示", res);
  18. reject(res);
  19. }
  20. },
  21. fail: function (err) {
  22. self.log(err);
  23. self.alert("提示", err);
  24. reject(err);
  25. }
  26. })
  27. })
  28. }
  29. }

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

</>复制代码

  1. const DEFAULT_REQUEST_OPTIONS = {
  2. url: "",
  3. data: {},
  4. header: {
  5.      "Content-Type": "application/json"
  6. },
  7. method: "GET",
  8. dataType: "json"
  9. }
  10. let util = {
  11. // 此处省略部分代码
  12. request (opt){
  13. let options = Object.assign({}, DEFAULT_REQUEST_OPTIONS, opt)
  14. let {url, data, header, method, dataType, mock = false} = options
  15. let self = this
  16. // 此处省略部分代码
  17. }
  18. }

如果是本地开发调试,需要增加我们的 mock 假数据,对 util.request 进行修改

</>复制代码

  1. let util = {
  2. // 此处省略部分代码
  3. request (opt){
  4. let options = Object.assign({}, DEFAULT_REQUEST_OPTIONS, opt)
  5. let {url, data, header, method, dataType, mock = false} = options
  6. let self = this
  7. return new Promise((resolve, reject)=>{
  8. if(mock){
  9. let res = {
  10. statusCode: 200,
  11. data: Mock[url]
  12. }
  13. if (res && res.statusCode == 200 && res.data) {
  14. resolve(res.data);
  15. } else {
  16. self.alert("提示", res);
  17. reject(res);
  18. }
  19. }else{
  20. wx.request({
  21. url: url,
  22. data: data,
  23. header: header,
  24. method: method,
  25. dataType: dataType,
  26. success: function (res) {
  27. if (res && res.statusCode == 200 && res.data) {
  28. resolve(res.data);
  29. } else {
  30. self.alert("提示", res);
  31. reject(res);
  32. }
  33. },
  34. fail: function (err) {
  35. self.log(err);
  36. self.alert("提示", err);
  37. reject(err);
  38. }
  39. })
  40. }
  41. })
  42. }
  43. }

如果请求接口调用时候,包含有参数 mock = true,会自动调用相应的 mock 数据,如果没有这个参数,就走正常流程去调数据。

调用方法如下:

</>复制代码

  1. util.request({
  2. url: "list",
  3. mock: true,
  4. data: {
  5. tag:"微信热门",
  6. start: 1,
  7. days: 3,
  8. pageSize: 5,
  9. langs: "en"
  10. }
  11. }).then(res => {
  12. // do something
  13. })

</>复制代码

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

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

</>复制代码

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

iKcamp最新活动

</>复制代码

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51393.html

相关文章

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

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

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

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

    zhigoo 评论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条评论

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