- 背景：需要从本地取登录的token访问数据，以及请求写域名很麻烦将其封装方便使用
一、封装基础讲解
主要模仿微信小程序自带函数方法形式调用。将js函数封装，参数使用json。输入使用的参数及函数名称。以取本地token封装为例：
1、获取userid
// 获取常用信息==================
//获取userid
//back为回调方法 失败返回false 成功返回userid
function getUserId(data) {
wx.getStorage({
key: getUserKey(),//'userInfo',
fail:function(res) {
data.back(false);
// return false;
},
success: function(res) {
var userData = res.data;
console.log(userData);
data.back(userData.usrid);
// return userData.usrid;
}
});
}
使用方法ps：传参数是json对象
var Data = require('../../utils/data.js');
Data.getUserId({
back:function(data){
console.log(data);
if(!data){return;}
var param = {'userId':data};
Data.postData({
url:'//userapp/user/getInfoByUserId',
param:param,
back:function(data) {
console.log(data);
}
});
}
});
2、请求封装
请求失败返回false成功返回json数据解析，内部包含了通用的逻辑判断，以及全局ip的包括方便修改ip。
//post===============
//url==网址 ,param===参数,back===返回的函数
function postData(data) {
var url = data.url;
var param = data.param;
var back = data.back;
console.log(url+'++++'+param.userId);
wx.request({
url: getUrl()+url,
data: param,
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': 'application/x-www-form-urlencoded'
},
complete: function(res) {
wx.hideLoading();
},
fail: function(res) {
wx.showToast({
title: '请求错误',
icon: 'error',
mask: true,
});
back(false);
},
success: function(res) {
console.log(res);
wx.hideLoading();
if(res.data.status==500){
wx.showToast({
title: '请求成功',
icon: 'success',
mask: true,
});
back(res.data.data);
return;
}else if(res.data.length>0){
wx.showToast({
title: res.data.data,
icon: 'error',
mask: true,
});
}
back(false);
}
})
}
//get===============
//url==网址 ,param===参数,back===返回的函数
function getData(data) {
var url = data.url;
var param = data.param;
var back = data.back;
console.log(url+'++++'+param);
wx.request({
url: getUrl()+url,
data: param,
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success: function(res) {
console.log(res);
wx.hideLoading();
if(res.data.status==500){
wx.showToast({
title: '请求成功',
icon: 'success',
mask: true,
});
back(res.data.data);
}else {
wx.showToast({
title: res.data.data,
icon: 'error',
mask: true,
});
}
// return res.data.data;
back(false);
},
fail: function(res) {
// fail
back(false);
},
complete: function(res) {
// complete
wx.hideLoading();
}
})
}
二、全部代码及讲解
使用方法代码，注意需要引入全局js（var Data = require('../../utils/data.js');）才能使用，方法需要暴露在外部。
var Data = require('../../utils/data.js');
// 请求数据
initData: function() {
Data.getUserId({
back:function(data){
console.log(data);
if(!data){return;}
var param = {'userId':data};
Data.postData({
url:'//userapp/user/getInfoByUserId',
param:param,
back:function(data) {
console.log(data);
}
});
}
});
},
通用js的代码，内部包含了常用数据保存的key，全局的ip，常用的请求方法包装。主要方法在外部调用需要module.exports = {}。使用的时候参数设计的是json为了符合微信小程序的代码风格。
//提供接口
module.exports = {
getUserKey : getUserKey,//保存登录的用户信息
getOpenPwKey : getOpenPwKey,//保存开门的钥匙
getUrl:getUrl,//host接口
postData:postData,
getData:getData,
getUserId:getUserId,
getUser:getUser
}
//post===============
//url==网址 ,param===参数,back===返回的函数
function postData(data) {
var url = data.url;
var param = data.param;
var back = data.back;
console.log(url+'++++'+param.userId);
wx.request({
url: getUrl()+url,
data: param,
method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
header: {
'content-type': 'application/x-www-form-urlencoded'
},
complete: function(res) {
wx.hideLoading();
},
fail: function(res) {
wx.showToast({
title: '请求错误',
icon: 'error',
mask: true,
});
back(false);
},
success: function(res) {
console.log(res);
wx.hideLoading();
if(res.data.status==500){
wx.showToast({
title: '请求成功',
icon: 'success',
mask: true,
});
back(res.data.data);
return;
}else if(res.data.length>0){
wx.showToast({
title: res.data.data,
icon: 'error',
mask: true,
});
}
back(false);
}
})
}
//get===============
//url==网址 ,param===参数,back===返回的函数
function getData(data) {
var url = data.url;
var param = data.param;
var back = data.back;
console.log(url+'++++'+param);
wx.request({
url: getUrl()+url,
data: param,
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success: function(res) {
console.log(res);
wx.hideLoading();
if(res.data.status==500){
wx.showToast({
title: '请求成功',
icon: 'success',
mask: true,
});
back(res.data.data);
}else {
wx.showToast({
title: res.data.data,
icon: 'error',
mask: true,
});
}
// return res.data.data;
back(false);
},
fail: function(res) {
// fail
back(false);
},
complete: function(res) {
// complete
wx.hideLoading();
}
})
}
//接口URL==============
function getUrl(){
return "http://120.55.117.108:8989";
}
// 获取常用信息==================
//获取userid
function getUserId(data) {
wx.getStorage({
key: getUserKey(),//'userInfo',
fail:function(res) {
data.back(false);
// return false;
},
success: function(res) {
var userData = res.data;
console.log(userData);
data.back(userData.usrid);
// return userData.usrid;
}
});
}
//获取user的登录信息
function getUser(data) {
wx.getStorage({
key: getUserKey(),//'userInfo',
fail:function(res) {
data.back(false);
// return false;
},
success: function(res) {
var userData = res.data;
console.log(userData);
data.back(userData);
// return userData;
}
});
}
//本地保存数据的key==============
//保存登录的用户信息
function getUserKey(){
return "userInfo";
}
//保存开门的钥匙
function getOpenPwKey() {
return "openpw";
}
网友评论