小程序发起请求和上传图片的封装
发起请求的封装
在进行页面交互过程中,需要多次与服务器进行数据的交换,所以对发起请求的封装就显得尤为重要。
在小程序项目中新增一个utils/api.js文件
代码如下:
1 // 服务器的基础域名 2 var baseAPI = 'http://192.168.1.36:8080/hires/'; 3 //上传图片服务器的基础域名 4 var imgAPI = 'http://192.168.1.36:8080/hires/'; 5 6 const _extend = (target, options) => { 7 if (typeof target !== 'object' || typeof options !== 'object') { 8 return; 9 } 10 let name; 11 for (name in options) { 12 if (options.hasOwnProperty(name) && !target.hasOwnProperty(name)) { 13 target[name] = options[name]; 14 } 15 } 16 return target; 17 }; 18 const jyAjax = obj => { 19 let data = obj.data || {}; 20 data = _extend(data, { 21 unitId: '100001', 22 timeStamp: new Date().getTime(), 23 // token: wx.getStorageSync('token') || '', 24 token:'123456' 25 }); 26 27 for (const key in data) { 28 if (data.hasOwnProperty(key) && data[key] == 'undefined' || data[key] == undefined) { 29 console.log('传递参数undefined,key值为:' + key + ',接口地址为:' + obj.url); 30 console.log('页面为:' + getCurrentPages()[getCurrentPages().length - 1].route); 31 } 32 } 33 if (obj.isShowLoading !== false) { 34 obj.isShowLoading = true; 35 } 36 if (obj.isShowLoading) { 37 wx.showLoading({ 38 title: '加载中..', 39 }); 40 }; 41 wx.request({ 42 url: baseAPI + obj.url, 43 method: 'POST', 44 header: { 45 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;' // 默认值 46 }, 47 data: data, 48 success: (res) => { 49 50 if (res.data.code == -2) { 51 let nowWebview = getCurrentPages()[getCurrentPages().length - 1]; 52 let nowWebviewUrl = nowWebview.route; 53 let nowWebviewOptions = nowWebview.options; 54 let fullUrl = nowWebviewUrl + '?'; 55 for (const key in nowWebviewOptions) { 56 if (nowWebviewOptions.hasOwnProperty(key)) { 57 fullUrl = fullUrl + key + '=' + nowWebviewOptions[key] + '&'; 58 } 59 }; 60 fullUrl = '/' + fullUrl.substring(0, fullUrl.length - 1); 61 wx.setStorageSync('beforeLoginPage', fullUrl); 62 } else if (res.data.code == -9) { 63 wx.showModal({ 64 title: '提示', 65 content: '服务器繁忙,请稍后再试', 66 showCancel: false 67 }) 68 }else { 69 if (typeof obj.success == 'function') { obj.success(res.data); } 70 } 71 }, 72 fail: (res) => { 73 if (typeof obj.error == 'function') { obj.error(res.data); } 74 }, 75 complete: (res) => { 76 if (obj.isShowLoading) { 77 wx.hideLoading(); 78 }; 79 if (typeof obj.complete == 'function') { obj.complete(res.data); } 80 } 81 }) 82 };
上传图片的封装
在上面的api.js文件新增代码:
1 const imgUpload = obj => { 2 let imgUrl = obj.imgUrl; 3 4 let url = baseAPI + "doFileUpload?token=123456"; 5 wx.uploadFile({ 6 url: url, 7 filePath: imgUrl, 8 name: 'file', 9 success: function (res) { 10 if (typeof obj.success == 'function') { obj.success(res); } 11 }, 12 complete: function (res) { 13 console.log(res); 14 } 15 }) 16 }
暴露接口
在最后暴露接口给需要引用的文件
1 //暴露模块接口 2 module.exports = { jyAjax: jyAjax, imgUpload: imgUpload, baseAPI: baseAPI, imgAPI: imgAPI };
设置为全局变量
在app.js把暴露的接口放在全局变量中,可以被所有文件引用。
let jyAjax = require('utils/api.js'); //app.js App({ jyAjax: jyAjax.jyAjax, imgUpload: jyAjax.imgUpload, })
应用
引用例子:
//获取应用实例 const app = getApp(); Page({ data: { }, onLoad: function () { app.jyAjax({ url:'app/mine/home/appHome.py', success:(res)=>{ } }) }, })