前言
小程序开发中都会调用后端工程师开发的API，小程序的开发文档提供了相对实用的API wx.request()，但是在开发的过程中，又遇到了一些问题，在小程序的项目开发时，调用的API不止一个，同一个API调用不止一次。同时，对于调用的API的管理也十分复杂，这样的背景下，对wx.request()方法的封装变得尤为重要。
解决思路
- 将API的路径放在一个文件里面方便管理，并暴露出来。
- 封装小程序的
request方法，并return(本文中用的promise处理)。 - 具体实现函数
实现
- 新建apiList.js文件用于存放适应的API接口
let host = 'http://127.0.0.1:3001' // 设置API接口的ip地址和端口
let apiList = {
login: host +'/user/login', //用户登录的API
register: host + '/user/register', //用户注册的API
//...
}
module.exports = apiList; //暴露出来
- 新建request.js文件以实现对
wx.request()的封装
import apiList from './apiList' // 引入apiList.js文件
const apiRequest = (url, method, data, header) => { //接收所需要的参数，如果不够还可以自己自定义参数
let promise = new Promise(function (resolve, reject) {
wx.request({
url: url,
data: data ? data : null,
method: method,
header: header ? header : { 'content-type':'application/x-www-form-urlencoded'},
success: function (res) {
//接口调用成功
resolve(res); //根据业务需要resolve接口返回的json的数据
},
fail: function (res) {
// fail调用接口失败
reject({ errormsg: '网络错误,请稍后重试', code: -1 });
}
})
});
return promise; //注意，这里返回的是promise对象
}
//登录接口的调用
let login = (data)=>{
return new Promise((resolve, reject) => {
resolve (apiRequest(apiList.login, 'get', data))
})
}
//注册接口的调用
let register= (data) => {
return new Promise((resolve, reject) => {
resolve(apiRequest(apiList.register, 'get', data))
})
}
//最后需要将具体调用的函数暴露出，给具体业务调用
export default {
login: login,
register: register
}
3.具体业务中的调用
var api = require('./request.js').default;
//登录点击事件
login(){
/**
*用户输入校验
TODO
*/
let params = {
username:'xxx'
password:'xxx'
}
api.login(params).then(res=>{
console.log(res) //API返回的数据
//业务处理
})
}
总结
通过对小程序网络请求方法的二次封装，使得我们的代码看上去更加的简洁，在接口的管理上也相对的便利，比如在后端修改API的路径时，只需要在apiList.js文件中修改相应的API即可，也免去了修改时忽略了更多调用的麻烦。同时，也提高了代码的复用性，一劳永逸。
