最近在做小程序项目,就想封装一个便于管理的接口地址的请求,百度了很久,发现很多前辈提供的轮子都不适合我。
所以自己来造了这个轮子,只需要在文件中声明请求方式和请求地址即可,在后期管理接口和使用起来会非常方便。
1、创建api.js文件,封装wx.request请求
// import apiList from './apiList' // 使用import引入会报错Unexpected identifier,所以改用require const host = require('./apiList').host; // 引入host地址 const apiList = require('./apiList').apiList; // 引入接口列表 const apiRequest = (url, method, data, header) => { // apiRequest方法接收wx.request所需要的参数,如果不够还可以自己添加参数 let promise = new Promise(function (resolve, reject) { wx.request({ url: host + url, data: data || null, method: method, header: header || { 'content-type':'application/x-www-form-urlencoded' }, success: function (res) { // 接口调用成功 resolve(res); // 根据业务需要resolve接口返回的json的数据 }, fail: function (res) { // 接口调用失败 reject({ errormsg: '网络错误,请稍后重试', code: -1 }); } }) }); return promise; // 注意,这里返回的是promise对象 } var list = {}; for(item in apiList) { list[item] = { index: item, http(data) { return new Promise((resolve, reject) => { resolve (apiRequest(apiList[this.index][1], apiList[this.index][0], data)) }) } }; } // 使用export default导出会报错Unexpected token export,所以改用module.exports // export default { // login, register // } module.exports = list; // 最后将这个对象导出,给其他页面调用
2、创建apiList.js文件,用来管理请求地址
// 设置API接口的ip地址和端口 let host = 'http://192.168.0.122:83/' // 所有接口列表 let apiList = { login: ['post', 'user/login'], register: ['get', 'user/register'] } // 将host和apiList导出 module.exports = { host, apiList }
3、在页面中调用请求
var api = require('../../utils/api.js'); // 需要先引入封装文件 Page({ onLoad() { api.login.http({username: "barben", password: "23333333"}).then(res => { console.log(res); }) api.register.http().then(res => { console.log(res); }) } })
请求效果
大功告成,现在就可以使用自己封装的请求方式,替换小程序的request啦。
虽然可以完美实现我期望的效果,但是这轮子的写法不太干脆利落,代码中使用了一段for循环,自认为是最大的败笔,欢迎各位大牛前来指点!