前言:
刚开始做小程序的时候,做网络请求接口调用的时候,都是用小程序原生网络请求API,但是做多了以后,特别是发现页面请求接口比较多的时候,会发现代码会显得很臃肿,于是觉得时候要抽取一下网络请求这一块的代码了,发现做完了还挺实用。由于本人是做iOS开发的,小程序这块不是很熟,如果有误导小伙伴们的地方,还望指正。
由于微信小程序的所有网络请求都是异步请求,如果页面有多个网络请求之间存在依赖的时候,必然就会发生嵌套,说到这里就得好好学习一下promise的知识了,这一部分看的是廖大神写的了,比较简单易懂。
话不多说,开始上代码了:
代码块 wxRequest.js
//引入Promise
var Promise = require('./es6-promise.auto.js');
//获取服务器地址
var servser = getApp().globalData.baseURL;
console.log('服务器地址:',servser);
//post请求
function postRequest(url, params) {
let promise = new Promise(function (resolve, reject) {
wx.request({
url: servser + url,
data: params,
method: 'POST',
header: {
'content-type': 'application/json'
},
success: function (result) {
// 请求成功
// console.log('请求结果:',result)
resolve(result);
},fail:function(result) {
//请求失败
reject(result)
}
});
});
return promise;
}
//get请求
function getRequest(url) {
let promise = new Promise(function (resolve, reject) {
wx.request({
url: servser + url,
method: 'GET',
header: {
'content-type': 'application/json'
},
success: function (result) {
// console.log('请求结果:', result)
resolve(result);
},fail: function (result) {
// 请求失败
reject(result)
}
});
});
return promise;
}
//暴露外部访问接口
module.exports = {
postRequest: postRequest,
getRequest: getRequest,
}
接下来在js页面调用起来就非常方便了,在此之前别忘了要引用一下wxRequest.js
CODE.png
const wxRequest = require('../../utils/wxRequest.js');
调用get封装方法
wxRequest.getRequest(url).then(result => {
console.log('用户数据:')
console.log(result.data)
})
调用post封装方法
wxRequest.postRequest(url, params).then(result => {
console.log('用户数据:')
console.log(result.data)
})
如果对和我一样刚做小程序不久的小伙伴有用的话,别忘了给个赞哈!