小程序的网络请求封装

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

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

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

相关文章

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

Amazing phpinfo()

前记 Xdebug 前记 定义 开启Xdebug 适用目标 实验效果 注意事项 session.upload_progress 定义 开启session.upl...

3646
来自专栏程序员笔记

Elasticsearch 入门: _bulk 批量导入数据

3594
来自专栏Python中文社区

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

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

3207
来自专栏圣杰的专栏

ABP入门系列(13)——Redis缓存用起来

源码路径:Github-LearningMpaAbp 1. 引言 创建任务时我们需要指定分配给谁,Demo中我们使用一个下拉列表用来显示当前系统的所有用户,以...

4139
来自专栏java学习

Hibernate学习笔记1

Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hi...

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

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

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

2443
来自专栏芋道源码1024

Java中高级面试题(4)

这里选了几道高频面试题以及一些解答。不一定全部正确,有一些是没有固定答案的,如果发现有错误的欢迎纠正,如果有更好的回答,热烈欢迎留言探讨。

1920
来自专栏Golang语言社区

协程解读

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

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

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

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

1162
来自专栏张善友的专栏

[腾讯社区开放平台]介绍开放授权协议-OAuth

OAuth (开放授权) 是一个开放标准,允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要将用户名和密码提供给第三方网站或分享他们数据的所...

2667

扫码关注云+社区

领取腾讯云代金券