DDR爱好者之家 Design By 杰米
本文实例讲述了微信小程序封装的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 }) } }); },
希望本文所述对大家微信小程序开发有所帮助。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年11月25日
2024年11月25日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]