小程序的网络请求封装

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

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

 //加载数据
  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 条评论
登录 后参与评论

相关文章

来自专栏纯洁的微笑

分布式爬虫系统设计、实现与实战:爬取京东、苏宁易购全网手机商品数据+MySQL、HBase存储

2103
来自专栏Python中文社区

Python云计算框架:Openstack源码分析之RabbitMQ(一)

專 欄 ❈ ZZR,Python中文社区专栏作者,OpenStack工程师,曾经的NLP研究者。主要兴趣方向:OpenStack、Python爬虫、Pytho...

2587
来自专栏Seebug漏洞平台

CVE-2017-16943 Exim UAF漏洞分析--后续

作者:Hcamael@知道创宇404实验室 上一篇分析出来后,经过@orange的提点,得知了meh公布的PoC是需要特殊配置才能触发,所以我上一篇分析文章最后...

3116
来自专栏安恒网络空间安全讲武堂

护网杯easy laravel ——Web菜鸡的详细复盘学习

复现让我发现了很多读wp以为懂了动手做的时候却想不通的漏掉的知识点(还是太菜orz),也让我对这道题解题逻辑更加理解。所以不要怂,就是干23333!

1593
来自专栏Seebug漏洞平台

CVE-2017-16943 Exim UAF漏洞分析——后续

上一篇分析出来后,经过@orange的提点,得知了meh公布的PoC是需要特殊配置才能触发,所以我上一篇分析文章最后的结论应该改成,在默认配置情况下,meh提供...

4108
来自专栏Golang语言社区

协程解读

协程,又称微线程,纤程。英文名Coroutine。 协程的概念很早就提出来了,但直到最近几年才在某些语言(如Lua)中得到广泛应用。 子程序,或者称为函数,在所...

35515
来自专栏散尽浮华

Kafka(分布式发布-订阅消息系统)工作流程说明

Kafka系统架构 Apache Kafka是分布式发布-订阅消息系统。它最初由LinkedIn公司开发,之后成为Apache项目的一部分。Kafka是一种快速...

1032
来自专栏技术翻译

Elasticsearch文档和映射

在Elasticsearch的说法中,文档是序列化的JSON数据。在典型的ELK设置中,当您发送日志或度量标准时,它通常会发送到Logstash,Logstas...

1091
来自专栏安富莱嵌入式技术分享

【RL-TCPnet网络教程】第30章 RL-TCPnet之SNTP网络时间获取

本章节为大家讲解RL-TCPnet的SNTP应用,学习本章节前,务必要优先学习第29章的NTP基础知识。有了这些基础知识之后,再搞本章节会有事半功倍的效果。

982
来自专栏腾讯大数据的专栏

网卡收包流程

0.前言 为提升信鸽基础服务质量,笔者就网络收包全流程进行了内容整理。 网络编程中我们接触得比较多的是socket api和epoll模型,对于系统内核和网卡驱...

1.5K14

扫码关注云+社区