小程序开发(3)-之wx.request封装

#主要的封装是wxRequest、wxRequestGet、wxRequestPost、wxRequestPromise、headers这几个函数，由于太过赘余不进行截图展示，可以看utils.js

#wxRequest方法

wxRequest其实跟原始的wx.request没有太大的不同，相当于一个中间键，可以更灵活的配置，可维护性更高，一致请求，首先来解析一些wxRequest，以下简介的说明下

获取本地存储的token(ssoAuthToken)，如果token存在就设置header，直接请求接口，不存在就重新刷新token之后，再请求该接口

isLoading是用来判断某些接口是否需要wx.showLoading(加载中)，就可能我不是所有的接口都需要loading的提示，只是部分请求时长比较久的接口需要，所以我们存了一个需要loading的数组，判断请求的接口url是否存在这个数组中，存在就显示loading，而这个数组的数据都是从api.js里面拿出来的，如图一所示，我们每个API都是以对象的方式存的，为什么这样做呢，主要是想灵活点，例如我可能需要调不同的服务器的接口，那么我就可以配置多一个baseUrl的字段，调接口就传多一个baseUrl，如果没有传就使用默认的服务器域名

always方法其实是相当于请求失败的一个拦截器，请求失败后做什么事情

#wxRequestPromise方法

是加入Promise的一个操作，方便我们做链式调用，最后执行resolve或reject方法，返回一个Promise对象，供我们使用.then

#演示不同的请求方法代码片段

#util.wxRequest util.wxRequest({ url: api.queryServiceAreaByName.url, data: queryServiceAreaByName, method: 'POST', success: function (res) { console.log(res); } })

#util.wxRequest
util.wxRequest({url: api.queryServiceAreaByName.url,data: queryServiceAreaByName,method: 'POST',success: function (res) {console.log(res);}})

#util.wxRequestPost
util.wxRequestPost({url: api.getEvaluateList.url,data,}).then(res => res.data.data).then(data => {console.log('data', data);})

#util.wxRequestPost util.wxRequestPost({ url: api.getEvaluateList.url, data, }) .then(res => res.data.data) .then(data => { console.log('data', data); })

#图一

const config = require('../config/config.js');
const dayjs = require("./dayjs");
const api = require("./api.js");
const app = getApp();const loadingApi = [api.queryServiceAreaInPoint.url,api.queryConstructionInPoint.url,api.queryServiceAreaByName.url,api.queryServiceAreaWithPoint.url,api.getUserDetails.url,api.addEvaluateItem.url,api.queryServiceAreaDetailInMap.url,api.queryOrderByPhone.url
];const formatTime = date => {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()const hour = date.getHours()const minute = date.getMinutes()const second = date.getSeconds()return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}const formatNumber = n => {n = n.toString()return n[1] ? n : '0' + n
}function headers(header) {header = header || {};//小应用特殊头header['X-Requested-isWXAPP'] = 'YES';//session_id , vmc_uid 处理var session_id = wx.getStorageSync('_SID'),vmc_uid = wx.getStorageSync('_VMC_UID');var ownshop = wx.getStorageSync('own_shop');// SIDif (session_id)header['X-WxappStorage-SID'] = session_id;if (ownshop) {header['X-REQUESTED-HEADER-VSHOPID'] = ownshop;}// UIDif (vmc_uid)header['X-WxappStorage-VMC-UID'] = vmc_uid;if (wx.getStorageSync('merchant_id')) {header['X-WxappStorage-MCH-ID'] = wx.getStorageSync('merchant_id');}if (config.RUN_ON_SAAS && wx.getExtConfig) {var ext_vars = wx.getExtConfigSync();// SAAS RUN TYPEheader['x-requested-saas-mode'] = 'APP';header['x-requested-saas-app'] = ext_vars.host_pre;header['x-requested-saas-client'] = ext_vars.client_id;header['x-requested-saas-order'] = ext_vars.order_id;}return header;
}function wxRequest(params) {let ssoAuthToken = wx.getStorageSync('sso_auth_token') || null;let isLoading = loadingApi.includes(params.url);if (!params.header) {params.header = {};}// loading加载if (isLoading) {wx.showLoading({title: '加载中',})}// 如果没有baseUrl使用config上配置的，如果有使用传入的if (!params.baseUrl) {params.url = config.BASE_URL + params.url;} else {params.url = params.baseUrl + params.url;}headers(params.header);//content-typeparams.header['content-type'] = params.header['content-type'] ? params.header['content-type'] : 'application/json';if (ssoAuthToken) {params.header['accessToken'] = ssoAuthToken.accessToken;params.header['refreshToken'] = ssoAuthToken.refreshToken;let serviceAreaIds = ssoAuthToken.serviceAreas.map(item => item.id);if (params.data.serviceAreaIdList) {params.header['serviceAreaIds'] = params.data.serviceAreaIdList[0];} else {params.header['serviceAreaIds'] = serviceAreaIds[0];}}// 拿到接口数据后进行处理，相当于拦截器var always = function (res) {console.log('util.js：always')if (res.data && !res.data.success) {var res_redirect = res.data.redirect;if (res_redirect && res_redirect.match && res_redirect.match(/passport-login/i)) {//服务端登录状态丢失,重新登录delete (app.globalData.member);return checkMember(function () {wx.showModal({title: '已刷新用户登录状态',content: '请重新进入',showCancel: false,success: function (res) {wx.navigateBack();}});});}}};if (params.success) {var _tmp = params.success;params.success = null;params.success = function (res) {always(res);_tmp(res);if (isLoading) {// setTimeout(function () {wx.hideLoading();// }, 1000)}};} else {params.success = function (res) {always(res);};}// 获取ssoAuthToken，如果ssoAuthToken里的accessToken、refreshToken过期了，刷新后再请求接口  if (ssoAuthToken) {let timestamp = dayjs(new Date()).valueOf();if (ssoAuthToken.expiresIn < timestamp) {// 这里过期的时候可能执行多次，因为一个页面可能调了多个接口，可以做500ms的队列if (app && app.globalData) {app.globalData.loginModal.getTokenByRefreshToken(params);}} else {wx.request(params);}} else {wx.request(params);}
}// promise 封装 wxRequest
const wxRequestPromise = (method) =>(params) => new Promise((resolve, reject) => {if (!params.url) throw 'params url not found'params.method = methodparamsFn(params, 'success', resolve)paramsFn(params, 'fail', reject)console.log('params', params);wxRequest(params)})const paramsFn = (params, fnName, cb) => {const fn = params[fnName] || (() => { })params[fnName] = nullparams[fnName] = (res) => {fn(res)cb(res)}
}function wxUpload(params) {if (!params.header) {params.header = {};}headers(params.header);//content-typeparams.header['content-type'] = 'multipart/form-data';wx.uploadFile(params);
}
const checkMemberHook = function (page_ins, page_callback_fn) {let the_member = app.globalData.member;try {page_ins.setData({'member': the_member,});} catch (e) {//TODO}typeof page_callback_fn == 'function' && page_callback_fn(the_member);
}function checkMember(callback, is_retry) {var _this = this;clearTimeout(app.getMemberTimer);app.getMemberTimer = setTimeout(function () {console.log('begin getMember at ' + new Date());app.getMember(function (member) {if (member.member_id) {return checkMemberHook(_this, callback);}wxRequest({url: config.BASE_URL + '/openapi/toauth/callback/wechat_toauth_wxapppam/callback',method: 'POST',data: member,success: function (res) {if (!res.data.result || res.data.result != 'success') {console.info('oauth server callback res error:');console.info(res);wx.showModal({title: '授权失败',content: res.data.data || '',showCancel: (!is_retry),confirmText: (!is_retry ? '重试' : '确定'),success: function (res) {if (!is_retry && res.confirm) {checkMember.apply(_this, [callback, true]);}}});} else {// app.globalData.member.member_id = res.data.data.member_id;// app.globalData.member.openid = res.data.data.openid;Object.assign(app.globalData.member, res.data.data);checkMemberHook(_this, callback);}},complete: function () {}});});}, 0);
}function formatArea(area_str = '') {var match = area_str.match(/mainland:([^:]+)/);if (match) {return match[1].split('/').join('-');}
}function fix_img_url(url) {if (url.match(/^http([s]*):/)) {return url;}return 'https:' + url;
}//倒计时
function count_down(that, intDiff) {function cd() {var day = 0,hour = 0,minute = 0,second = 0; //时间默认值if (intDiff > 0) {day = Math.floor(intDiff / (60 * 60 * 24)).toString();hour = (Math.floor(intDiff / (60 * 60)) - (day * 24)).toString();minute = (Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60)).toString();second = (Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)).toString();}if (day <= 9)day = '0' + day;if (hour <= 9)hour = '0' + hour;if (minute <= 9)minute = '0' + minute;if (second <= 9)second = '0' + second;if (day == 0 && hour == 0 && minute == 0 && second == 0) {clearInterval(cd);}that.setData({countdown: {days: day,hours: hour,minutes: minute,seconds: second,}});intDiff -= 1;}setInterval(cd, 1000)
};function scene_parse(scene) {if (scene) {try {var scene_obj = JSON.parse(decodeURIComponent(scene));} catch (e) {return false;}if (typeof scene_obj == 'object') {return scene_obj;}return false;}return false;
}/*获取当前页带参数的url*/
function getCurrentPageUrlWithArgs() {var pages = getCurrentPages() //获取加载的页面var currentPage = pages[pages.length - 1] //获取当前页面的对象var url = currentPage.route //当前页面urlvar options = currentPage.options //如果要获取url中所带的参数可以查看options//拼接url的参数var urlWithArgs = url + '?'for (var key in options) {var value = options[key]urlWithArgs += key + '=' + value + '&'}urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)return urlWithArgs
}function gotoIndex() {wx.switchTab({url: "/pages/index/index"});
}function merchantShare(url) {let merchant_id;if (wx.getStorageSync('merchant_id')) {merchant_id = wx.getStorageSync('merchant_id');} else {merchant_id = 0;}if (url.indexOf("?") != -1) {url += '&merchant_id=' + merchant_id} else {url += '?merchant_id=' + merchant_id}return url;
}function getQuery(url, query) {if (url.indexOf('?') < 0)return;var arr = url.split('?');var query_arr = arr[1].split('&');for (var i = 0; i < query_arr.length; i++) {let single_arr = query_arr[i].split('=');console.log('single_arr', single_arr);if (!single_arr[1]) continue;query[single_arr[0]] = single_arr[1];}return query;
}function setTabBarBadge() {wxRequest({url: config.BASE_URL + '/openapi/cart/count',success: function (res) {try {if (res.data.data.quantity > 0) {wx.setTabBarBadge({index: 1,text: res.data.data.quantity.toString(),success: function () {},fail: function () {},complete: function (e) {}})} else {wx.removeTabBarBadge({index: 1,success: function () {},fail: function () {},complete: function (e) {}})}} catch (e) {console.log(e)}}});
}// 过滤显示服务区的拥有服务图标
function filterServiceProvidedIcon(params) {if (!params) {return []}var IconObj = {//餐饮 coffeeActivecatering: 'coffeeActive',//住宿 oilActiveaccommodation: 'oilActive',//购物 shoppingActiveshopping: 'shoppingActive',//卫生间 toiletActivetoilet: 'toiletActive',//停车场 parkparking_lot: 'park',//加油站 gasfuel_filling: 'gas',//充电桩 chargerecharge: 'charge',//加气站 naturalGasair_entrapping: 'naturalGas',//维修 maintainmaintenance: 'maintain',//其他服务 more}var originIcon = params.split(',')var fileterIcon = originIcon.map(element => IconObj[element])return fileterIcon.filter(ele => ele)
}function setHtmlSnip(keyword, text) {return '<div>' + text.replace(new RegExp(keyword, 'g'), `<span style="color: blue">${keyword}</span>`) + '</div>'
}const wxRequestGet = wxRequestPromise('GET')
const wxRequestPost = wxRequestPromise('POST')function getUserInfo() {return new Promise((resolve, reject) => {const wxUserInfo = wx.getStorageSync('wx_userinfo') || {}if (wxUserInfo.nickName) {resolve(wxUserInfo)} else {wx.getUserInfo({success: (result) => {wx.setStorage({data: { ...wxUserInfo, ...result.userInfo },key: 'wx_userinfo',})resolve(result.userInfo)},complete: () => resolve({}),})}})
}const buriedPoint = async (data = {}) => {const { scene } = wx.getLaunchOptionsSync()const wxUserInfo = await getUserInfo()// console.log('wxUserInfo', wxUserInfo);data = {...data,buriedPointType: data.path ? 0 : 1,type: Number(scene !== 1001),nickName: wxUserInfo.nickName || '',phoneNumber: wxUserInfo.phoneNumber || '',}console.log('buriedPoint', data);return wxRequestPost({url: api.buriedPoint.url,data,})
}const checkLogin = () => new Promise((resolve, reject) => {const app = getApp()if (app.globalData.checkLogin) {resolve()} else {const cb = app.checkLoginReadyCallbackapp.checkLoginReadyCallback = () => {typeof cb === 'function' && cb()resolve()};}
})const getTime= function(value, flag) {let theTime = parseInt(value);// 秒let middle= 0;// 分let hour= 0;// 小时let result = ""if(theTime > 60) {middle= parseInt(theTime/60);theTime = parseInt(theTime%60);if(middle> 60) {hour= parseInt(middle/60);middle= parseInt(middle%60);}if(flag) {result = ""+parseInt(theTime)+"秒"}} else {result = ""+parseInt(theTime)+"秒"}if(middle > 0) {result = ""+parseInt(middle)+"分钟"+result;}if(hour> 0) {result = ""+parseInt(hour)+"小时"+result;}return result;
}function enclosureJHpay(params) {var _this = this;let userInfo = wx.getStorageSync('wx_userinfo');return wxRequestPost({url: api.enclosureJHpay.url,data: {...params,appId: config.APPID,openId: userInfo.openId}}).then(res => {let payParams = res.data.data;return new Promise((resolve, reject) => {console.log(res)wx.requestPayment({timeStamp: payParams.timeStamp,nonceStr: payParams.nonceStr,package: payParams.mypackage,signType: payParams.signType,paySign: payParams.paySign,success: function (res) {console.log(res);resolve(res);},fail: function (err) {console.log(err);reject(err)}})})})
}function getQueryString(urlStr) {let urlParams = {};let str = urlStr.substr(urlStr.indexOf("?")+1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串let strs = str.split("&");for (let i = 0; i < strs.length; i++) {let sTemp = strs[i].split("=");urlParams[sTemp[0]]=(sTemp[1]);}return urlParams
}module.exports = {formatTime: formatTime,headers: headers,wxRequest: wxRequest,wxUpload: wxUpload,checkMember: checkMember,formatArea: formatArea,fixImgUrl: fix_img_url,countdown: count_down,sceneParse: scene_parse,getCurrentPageUrlWithArgs: getCurrentPageUrlWithArgs,gotoIndex: gotoIndex,merchantShare: merchantShare,getQuery: getQuery,setTabBarBadge: setTabBarBadge,filterServiceProvidedIcon: filterServiceProvidedIcon,wxRequestGet,wxRequestPost,buriedPoint,checkLogin,getUserInfo,setHtmlSnip: setHtmlSnip,getTime: getTime,enclosureJHpay: enclosureJHpay,getQueryString: getQueryString
}

小程序开发(3)-之wx.request封装相关推荐

微信小程序设置请求超时wx.request等，简单易懂！
微信小程序设置请求超时wx.request等一.用到的方法: 个人理解,比较粗糙看不懂可以百度一下具体用法 new Promise:new了一个函数或者方法,可以被Promise.race等方法调 ...
微信小程序开发扫条码wx.scanCode报scanCode:fail
用小程序开发工具扫码报错scanCode:fail,使用真机调试可以识别.测试后发现是因为条码文件没有留足边界导致模拟器扫码失败.比如条码的条纹的长宽为:50px*30px.那么这个图片文件的长度应该 ...
微信小程序|开发实战篇之request请求（单个、多个参数，json对象，header）
开发实战篇之request请求前言 1.发送单个.多个参数的request 2.发送JSON对象的request 3.发送header的request 前言小程序发送网络请求常会遇到的问题: 请求 ...
微信小程序数据交互（wx.request）
对 wx.request 的理解微信小程序的设计模式基本依照于前端设计 html+css+js,关于与后端数据的交互,小程序不能像传统后端开发语言一样,能直接连接操作数据库.小程序更多的是像前端界面 ...
微信小程序的http请求wx.request（实测有效）
/** * 网络请求封装 * 1.接口url * 2.参数 json * 3.回调 callback */ /** ***************请求示例************** http.pos ...
小程序开发(12)-之分页封装
这里的分页呢就记录下,上拉加载的,小程序给我们提供了一个监听滚动到底部的周期函数onReachBottom,当页面超过整屏的高度后,滚动页面到底部就会触发这个事件,所以做上拉加载的时候,非常的方便,下 ...
微信小程序开发POST请求
微信小程序开发POST请求 wx.request( { url: "http://op.juhe.cn/onebox/weather/query", header: { " ...
微信小程序开发（三）入门之创建打卡活动
相关文章微信小程序开发(一)微信开发者工具以及小程序框架介绍微信小程序开发(二)开发之日历打卡小程序发现页微信小程序开发(四)入门之打卡功能开发前言上篇介绍了日历打卡小程序发现页视图相关开发 ...
微信小程序开发指南介绍
一.小程序介绍与开发环境: 1.helloworld代码 [1]请前往https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html ...

小程序开发(3)-之wx.request封装

小程序开发(3)-之wx.request封装相关推荐

最新文章

热门文章