微信小程序封装的HTTP请求示例【附升级版】

本文实例讲述了微信小程序封装的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
 })
 }
 });
 },

希望本文所述对大家微信小程序开发有所帮助。