许久不曾写博客文章，今日回归，再次拾起，不以用来予人参考，只为记录那些曾经在项目里面碰到过的实际问题以及解决办法，记录下来，以后可以用作参考。
回归正题
在小程序开发中，我们请求后台数据接口的时候，屡次要使用小程序的网络请求api函数 wx.request ，然后就是一大段的代码与回调函数，非常的不方便代码复用和代码的维护检查， 因此，我们尝试来封装一个“数据请求层”。
-
新建一个专门用于放置与接口请求有关的js文件，并命名为 “api”
不多bb，把代码贴上如图。
文件夹内容
-
在index.js里面封装wxRequest，封装成为Promise的形式，用于在其他js文件调用。
const baseUrl = "www.baidu.com"; //这里以百度为例子，可自行修改接口地址
//通用方法
const wxRequest = (url, method, params) => {
return new Promise((resolve, reject) => {
wx.request({
url: `${baseUrl}${url}`,
data: params,
method: method,
header: {
'wili-access-token': wx.getStorageSync('token'),
},
success: res => {
if (res.statusCode === 200) {
resolve(res);
} else {
reject(res);
}
},
error: error => {
reject(error);
}
});
}).catch(msg => {
console.error(msg);
});
};
module.exports.wxRequest = wxRequest;
代码的意思是 把 url, method, params 这些会发生变化的作为参数传入。如果请求成功则会调用resolve(res); 并把返回信息res传入，如果失败则会调用 reject(error)方法;并把错误信息传入。
最后把wxRequest变量导出，因为小程序遵循的模块化方案使用的是commonJS的方案。
- 调用请求方法
举个栗子，我们在api_user.js 这个文件内调用刚刚封装好的wxRequest ，如图。
const api = require('./index.js');
// 用户相关api
module.exports.login = params => {
return api.wxRequest('/api/getMiniUserInfo', 'POST', params)
}
// module.exports.saveUserInfo = params => {
// return api.wxRequest('/api/miniRegist', 'POST', params)
// }
module.exports.getUserInfo = params => {
return api.wxRequest('/api/personal', 'GET', params)
}
导入我们刚刚封装好的index.js文件模块，由于我们刚刚封装的是Promise形式的wxRequest ，所以函数的返回值返回的就是Promise对象，例如，
return api.wxRequest('/api/getMiniUserInfo', 'POST', params) 这里就是传递请求参数，当请求成功后会返回wxRequest 的一个Promise“结果”对象， 这个结果对象由 resolve方法 或者reject方法执行后返回的。(不理解Promise的童鞋，可自行先理解学习一下ES6 Promise)。
- 使用封装好的处理数据的api
const { login, getUserInfo } = require("./api/api_user.js");
App({
onLaunch: function() {
// 登录
wx.login({
success: res => {
this.userLogin(res.code);
}
});
},
// 小程序启动请求登录接口
userLogin(code) {
login({ code }).then(res => {//调用的login就是我们上面封装好的哈
wx.setStorageSync("token", res.data.data);
});
},
globalData: {
userInfo: null
}
});
引入api_user.js ，在userLogin函数里面执行的login函数，就是我们刚刚经过封装用作处理接口数据的函数了。传入它的参数。在then()里面拿到返回的数据res与执行回调函数处理之后逻辑。
网友评论