基础函数
基础函数的作用是将 wx.request 封装成 Promise 对象,通过 export 对外输出。
/**
* 请求业务接口基本方法
*
* @param {Object} [data={}] - 对应wx.request里data参数
* @param {Object} [opts={}] - 对应wx.request里其他参数
* @returns {Promise}
*/
export function fetch(data = {}, opts = {}) {
// 通用设置
const options = {
url: 'https://api.youapp.com/'
header: {
'cookie': `your_key=your_value;`
}
}
return new Promise((resolve, reject) => {
wx.request({
...Object.assign(options, opts),
data,
success: function(res) {
resolve(res);
},
fail: function(err) {
reject(err);
}
})
})
.then(checkStatus)
.catch(() => {
// do something
})
}
全局异常处理
业务接口往往会设置一个标志位,告诉请求方请求是否异常。因为标志位是事先约定好的,所以可以在全局处理异常。示例函数中code为标志位,当code为0时,返回数据;当code不为0时,属于异常情况。这里,处理异常的方法是跳转一个错误页面,可根据项目要求自行设置处理方法。
/**
* 接口返回值状态判断
*
* @param {Object} response - 接口返回值
* @returns {Promise}
*/
function checkStatus(response) {
let msg = '';
if (response.statusCode >= 200 && response.statusCode < 300) {
let { code } = response.data
switch (code) {
case 0:
// 请求成功,返回一个Promise对象
return Promise.resolve(response.data);
break;
case 1:
// 处理token过期的情况
wx.removeStorageSync("token");
msg = '哎哟,登录超时,刷新试试';
break;
default:
msg = '哎哟,服务异常,刷新试试';
break;
}
}
// 防止重复跳转
if (getCurrentPageUrl() != 'pages/error/error'){
wx.navigateTo({
url: `/pages/error/error?msg=${msg}`
});
}
}
/**
* 获取当前页面url
* @returns {String} 当前页面url
*/
function getCurrentPageUrl(){
let pages = getCurrentPages() //获取加载的页面
let currentPage = pages[pages.length-1] //获取当前页面的对象
return currentPage.route //当前页面url
}
带Token的请求函数
有些业务接口需要携带用户信息。微信小程序通过 token 传递用户信息,具体流程请见小程序官方文档。
因此,我们还需要封装一个带Token的请求函数。实现方法是将token存在storage中,每次请求时判断token是否存在。若存在,直接发起请求;若不存在,则先获取token,再发起请求。这里还能用到上面已经封装好的基础函数,来简化函数。
/**
* 带token的请求业务接口
*
* @param {Object} [data={}] - 对应wx.request里data参数,也就是query部分
* @param {Object} [opts={}] - 对应wx.request里其他参数
* @returns {Promise}
*/
export function fetchWithToken(data = {}, opts = {}) {
const token = wx.getStorageSync('token');
if (token) {
data.token = token;
return fetch(data, opts)
} else {
return getToken().then((token) => {
data.token = token;
return fetch(data, opts);
})
}
}
根据微信的登录流程,需要通过 wx.login 获取临时凭证(code),然后用code向后台兑换token,因此 getToken 函数的逻辑是这样的:
/**
* 获取token
* @returns {String} token token值
*/
function getToken() {
// 返回一个Promise对象
return new Promise((resolve, reject) => {
wx.login({
success: function(res) {
if (res.code) {
let data = {
code: res.code
};
fetch(data).then((res) => {
const { token } = res;
// 把token放在storage中
wx.setStorageSync("token", token);
// 输出token
resolve(token);
});
}else{
console.log('code error');
}
},
fail: function(err) {
console.log('登录失败!' + err.errMsg);
}
})
})
}
将这些函数放在一个文件中,并将 fetch 函数和 fetchWithToken 函数输出,就能在页面中调用封装好的请求函数,简化开发过程。