小程序的网络请求封装

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

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

//加载数据requestData() {var that = thisif (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
}

小程序的网络请求封装相关推荐

微信小程序常见网络请求失败问题总结及解决方案
微信小程序常见网络请求失败问题总结及解决方案微信开发者工具中未勾选不校验合法域名设置未勾选这个设置在任何环境下发送http网络请求会失败发送的是https请求,但网络请求依旧是失败需要到官方的 ...
微信小程序的网络请求 —— 微信小程序教程系列（14）
网络请求,基本上是必须的环节之一. 小程序提供了wx.request(object),与开发者的服务器实现数据交互的一个很重要的api. 最简单的用法如下(以GET请求为例) <view bin ...
微信小程序服务器开小差了,微信小程序wx.request请求封装
微信小程序 wx.request RequestTask wx.request(Object object)发起 HTTPS 网络请求. 示例代码 wx.request({ url: 'test.ph ...
微信小程序之网络请求
概述微信网络请求api 小程序宿主环境要求request发起的网络请求必须是https协议请求,因此开发者服务器必须提供HTTPS服务的接口,同时为了保证小程序不乱用任意域名的服务,wx.reque ...
《十四》微信小程序中的常用 API之登录、获取用户信息、支付、提现、跳转小程序、网络请求、弹框、导航、数据缓存、图片、查看文档、音频、拨打电话、剪贴板、滚动、WXML
微信小程序提供了 wx 这个全局变量,通过这个全局变量可以调用微信小程序的 API. 登录: wx.login():获取登录凭证 code.通过登录凭证 code 进而换取用户登录态信息,包括用户在当 ...
小程序仿 axios 请求封装
一.新建request.js /** 功能:小程序仿 axios 的请求封装*/ export default class Request {// 配置项configure = {baseURL: ' ...
微信小程序网络请求异常怎么办_解决·微信小程序开发-网络请求报Invalid request 400错误...
今天学习了一下微信小程序的入门开发,在使用网络请求时,发现根据微信官方的API的方法进行操作出现Invalid request 400错误,到底怎么回事呢? 首先我们来看微信API网络请求示例代码: ...
微信小程序wx.request请求封装,和跨域的解决。
建议把所有请求抽离到不同页面对应的js文件中,可以方便后期的修改和排查问题,小程序请求是通过微信后台来请求我们的后台地址来进行后端映射.你请求的接口实际到微信的后端做了一道映射,微信后端拿到你的 wx ...
小程序http 网络请求失败
小程序只有开发测试的时候才能用http请求,而且要在开发工具中设置. 如果是真机上面,需要设置小程序调试模式.右上角设置. 需要注意的是调试的时候,ip不能是电脑本地,局域网ip.必须是网络ip.否则 ...
微信小程序登录及请求封装
整合了获取用户信息/用户手机号/及请求封装粘贴即用目录结构 app.js //app.js // const util = require('/utils/util.js') // import ...

小程序的网络请求封装

小程序的网络请求封装相关推荐

最新文章

热门文章