小程序的网络请求封装

我们前端开发就要有面向对象的思想,让自己写的程序更加简单明了,不要有太多的融于代码,所以这里提到了封装的思想。

之前的项目里每次调用网络请求都调用了类似的代码:

 //加载数据
  requestData() {
    var that = this
    if (that.data.listData.length < 1) {
      wx.showToast({
        title: '加载中',
        duration: 500
      })
    } else {
      wx.showNavigationBarLoading()
    }
    wx.request({
      url: app.globalData.webUrl+"serviceAction/getStoreList.do",
      data: {
        longitude: app.globalData.longitude,
        latitude: app.globalData.latitude,
        city: "长沙",
        page: this.data.pageNum,
        pagesize: 10,
        userId: 38971,
      },
      method: "POST",
      "Content-Type": "application/x-www-form-urlencoded",
      success: function (res) {
        wx.stopPullDownRefresh()
        if (that.data.pageNum == 1) {
          that.data.listData = []//清空数组
        }
        var list = [];
        var imgUrl = [];
        var url = "http://yijiao.oss-cn-qingdao.aliyuncs.com/";
        for (var i = 0; i < res.data.content.length; i++) {
          list.push(res.data.content[i]);
          imgUrl.push(url + res.data.content[i].mainImgUrl)
          console.log("请求成功" + res.data.content[i])
        }
        that.setData({
          listData: list,//更新数据
          imageUrl: imgUrl
        })
      },
      fail: function () {
        wx.showModal({
          title: '加载出错',
          showCancel: false
        })
      },
      complete: function () {
        wx.hideToast()
        wx.hideNavigationBarLoading()
      }
    })
  }

每次只要涉及网络获取数据,就会有这些冗余代码的出现,之前不太熟悉,,没有做封装,现在做了一个项目,知道了很多思想,也了解了大致,想做一个简单的调用,也方便了以后查找某个接口的简化。

1.咱们把公共方法写在util.j中 util.js代码:

var webUrl = "https://www.jiaodutong.com/";
//网络请求方法
function getWebDataWithPostOrGet(model){
  wx.request({
    url: webUrl +model.url ,
    data:model.param,
    header: {
      "Content-Type": "application/json"
    },
    method: model.method,
    success: function (res){
      model.success(res.data)
    },
    fail: function(res){
      wx.showModal({
        title: res,
        showCancel: false
      })
    }
  })
}
// 导出模块
module.exports = { getWebDataWithPostOrGet: getWebDataWithPostOrGet
}

然后前端调用就可以这样做了:

var utils = require('../../utils/util.js')
var webData = {
       "longitude": app.globalData.longitude,
         "latitude": app.globalData.latitude,
          "city": "长沙",
          "page": 0,
           "pagesize": 10,
           "userId": 38971
      }
    utils.getWebDataWithPost({
      url: utils.bigUrl ,
      param: webData,
      method: "POST",
      success:function (data){
        console.log(data.content[0].mainImgUrl);
      }
    })

我之前写的 "Content-Type": "application/x-www-form-urlencoded", 报了个错误

错误

接口本身是没有问题的,但是400访问不到,想到可能是header 的问题,查看文档:

20170329160326213.jpg

改为 "Content-Type": "application/json",正确拿到返回数据。

还有几点需要注意下: 1.一般对自己写的接口给自己用的时候,method方法或header都是约定好的,所以不用重复书写,哎util中写为固定的格式。

2.而fail回调方法也可以统一处理;进一步地,也可以对success回调里的针对code值进一步判断,特定错误码统一处理,比如跳转登录页面等。 例如下列代码,更加完善。

if(res.data.code==0)
      {
        model.success(res.data)
      }

3.如果每一个接口,都当作参数,项目变大后,接口特别多,查找不方便,可以写一个公共接口类,有一点需要注意就是暴露变量和暴露方法不同类如: url.js代码

//获取门店列表
var bigUrl = "serviceAction/getStoreList.do";

//获取项目列表
var projectList = "serviceAction/getItemsByStoreId.do"

//导出模块
module.exports = {
  bigUrl,
  projectList
}

完美!

每天看到阅读量和粉丝的增加都激励自己要多多分享,准备写一个小程序的专题,希望大家可以共同进步。

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端说吧

CSS-各种cs样式之浏览器兼容处理方式汇总大全(更新中...)

3155
来自专栏搞前端的李蚊子

小程序第三方框架对比 ( wepy / mpvue / taro )

     众所周知如今市面上端的形态多种多样,手机Web、ReactNative、微信小程序, 支付宝小程序, 快应用等,每一端都是巨大的流量入口,当业务要求同...

1323
来自专栏知晓程序

开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做!

之前做小程序开发时,需要实现对多行文本进行的折叠的效果(类型微信朋友圈)。主要交互有三点:

1185
来自专栏程序员的知识天地

web前端开发规范总结

Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。...

1062
来自专栏phodal

【架构拾集】移动应用 WebView 的 bridge 设计

最近的一个项目,是一个关于在移动应用中嵌入 WebView,并在其中实现 JavaScript 能调用原生代码。虽然已经有 Cordova 这样的成熟方案,但是...

602
来自专栏微信小程序开发

微信小程序开发常见问题(二)

知晓程序员,专注微信小程序开发的程序员! 今天再给大家分享几个微信小程序开发的常见问题,顺便吐槽一下,武汉的冬天太TM冷了,没有暖气的冬天真的很难过,写文章的心...

4215
来自专栏互联网杂技

前端兼容性问题总结

css兼容性问题 1、标签,不加样式控制的情况下,各自的margin 和padding差异较大。 解决方案:css里 *{margin:0;pad...

3305
来自专栏QQ音乐技术团队的专栏

网页加速特技之 AMP

据统计,40%的人会放弃使用加载时间超过3秒的网站。对于加载慢的页面我也是没耐心等待的,同类型网站那么多,为什么不选择加载速度更快体验更好的呢。

4367
来自专栏星回的实验室

使用Headless Browser渲染页面

忙了很长一段时间,需要浮出水面来总结一工作了,不然做过的东西就像翻过一页完全没有记住的书,难免徒劳。

582
来自专栏一“技”之长

AppleWatch开发入门五——菜单控件的使用

        菜单也是WatchOS中一个重要的交互方式,限于Watch的屏幕尺寸,若将所有用户交互控件都紧密的排列进展示的UI中,那样难免会使用户操作困难,...

791

扫码关注云+社区