发起请求的封装
在进行页面交互过程中，需要多次与服务器进行数据的交换，所以对发起请求的封装就显得尤为重要。
在小程序项目中新增一个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.jsApp({ ?jyAjax: jyAjax.jyAjax, ?imgUpload: jyAjax.imgUpload,})应用
引用例子：
//获取应用实例const app = getApp();Page({ ?data: { ????}, ?onLoad: function () { ???app.jyAjax({ ?????url:‘app/mine/home/appHome.py‘, ?????success:(res)=>{ ?????????????} ???}) ?},})小程序发起请求和上传图片的封装
原文地址：https://www.cnblogs.com/wxw1314/p/8385657.html