微信小程序封装的HTTP请求示例【附升级版】
作者：zhy前端攻城狮
这篇文章主要介绍了微信小程序封装的HTTP请求,结合实例形式分析了微信小程序封装基于wx.request方法的http请求相关操作与使用技巧,并附带升级版示例供大家参考,需要的朋友可以参考下
本文实例讲述了微信小程序封装的HTTP请求。分享给大家供大家参考，具体如下：
微信小程序里自己封装了请求的函数，但几乎每个页面都要用到，所以为什么更方便的调用，再一次进行封装。
在app.js里面定义个全局对象，这样想要用到该函数，只需要在该页面的js文件里面，请求一个app实例。
废话不多说，先上代码：
//全局对象httpClient
httpClient:{
request:function(method,url,data){
//返回一个promise实例
return new Promise( (resolve,reject)=>{
wx.request({
url:url,
data:data,
mehtod:method,
success:function(res){
resolve(res)
},
fail:function(res){
reject(res);
},
complete:function(){
console.log('complete');
}
})
})
}
//get方法：用来获取数据
get:function( url ) {
return this.request('GET',url);
},
//post方法：用来更新数据
post:function( url,data) {
resturn this.request('POST',url,data);
},
//put方法
put:function(url,data){
return this.request('PUT', url, data);
},
//delete方法
delete:function(url,data){
return this.request('DELETE', url, data);
}
在需要请求的页面调用：
例如：登录页面login.js
//获取app实例,从而调用全局对象的函数
var app=getApp();
login:function(){
var url='http:xxxxx/login';
var data={
userName:'xxxxx',
passwd:'xxxxxx'
}
app.httpClient.post( url,data )
.then( res=>{console.log("请求成功时调用该函数")})
.catch(res=>{console.log("请求失败时调用该函数")})
}
//为了更好的阅读，也可以将回调函数，定义在外面
//这样
loginSuccess:function(){
console.log("请求成功时调用该函数")
},
loginFail:function(){
console.log("请求失败时调用该函数")
},
login:function(){
var self=this;
var url='http:xxxxx/login';
var data={
userName:'xxxxx',
passwd:'xxxxxx'
}
app.httpClient.post( url,data )
.then( res=>self.loginSuccess())
.catch(res=>self.loginFail())
}
是不是简洁多了。。。。
附：升级版
上代码
// 该函数怎么写，需要跟后端人员协商返回的格式
function getErrorMsgByErrorNo(error_no) {
let error_msg;
switch (error_no) {
case 100: error_msg = '操作失败，请稍后再试！'; break;
default: error_msg = '网络错误，请稍后再试！'; break;
}
return error_msg;
}
function handleData(res) {
if (res.data.success) {
if (typeof (res.data.body) === 'string') {
return [];
} else if (Array.isArray(res.data.body) === false) {
const _arr = [];
_arr.push(res.data.body);
return _arr;
} else {
return res.data.body;
}
} else {
if (res.data.error_no) {
return {
error_no: res.data.error_no,
error_msg: getErrorMsgByErrorNo(res.data.error_no)
};
} else {
return {
error_no: 123456,
error_msg: '服务器维护中，请稍后!'
};
}
}
}
const httpClient = {
request: function (method, url, data) {
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data,
method: method,
success: function (res) {
resolve(handleData(res))
},
fail: function (err) {
console.log('request fail ', err);
resolve({
error_no: 100,
error_msg: getErrorMsgByErrorNo(100)
})
},
complete: function (res) {
console.log("request completed!");
}
})
});
},
get: function (url) {
return this.request('GET', url);
},
post: function (url, data) {
return this.request('POST', url, data);
},
put: function (url, data) {
return this.request('PUT', url, data);
},
delete: function (url, data) {
return this.request('DELETE', url, data);
},
};
module.exports = httpClient;
使用
function getMyselfData() {
const _Url= urls.url;
return httpClient.get(_Url);
}
getData() {
let resultsData = this.getMyselfData();
resultsData.then((res) => {
if (res.error_no) {
// 只要有error_no就说明请求出现了错误
this.toast.showToast({
type: 'fail',
title: res.error_msg,
})
} else {
this.setData({
journeyList: res.data
})
}
});
},
希望本文所述对大家微信小程序开发有所帮助。