小程序封装request请求，统一API

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

程序开发中都会调用后端工程师开发的API，小程序的开发文档提供了相对实用的APIwx.request()，但是在开发的过程中，又遇到了一些问题，在小程序的项目开发时，调用的API不止一个，同一个API调用不止一次。同时，对于调用的API的管理也十分复杂，这样的背景下，对wx.request()方法的封装变得尤为重要。
本文的解决思路为：将API的路径和方法放在一个文件里面方便管理;封装小程序的request方法，并返回promise处理(ES6)。

一、units文件夹中新建request.js文件

// utils/request.js
//封装requestlet apiRequest = (url, method, data, header) => { //接收所需要的参数，如果不够还可以自己自定义参数
let promise = new Promise(function (resolve, reject) {
wx.showNavigationBarLoading() //在标题栏中显示加载
wx.request({
url: url,
data: data ? data : null,
method: method,
header: header ? header : { 'content-type': 'application/x-www-form-urlencoded' },
complete: function () {
wx.hideNavigationBarLoading(); //完成停止加载
wx.stopPullDownRefresh(); //停止下拉刷新
},
success: function (res) {
//接口调用成功
resolve(res.data); //根据业务需要resolve接口返回的json的数据
},
fail: function (res) {
wx.showModal({
showCancel: false,
confirmColor: '#1d8f59',
content: '数据加载失败，请检查您的网络，点击确定重新加载数据!',
success: function (res) {
if (res.confirm) {
apiRequest(url, method, data, header);
}
}
});
wx.hideLoading();
}
})
});
return promise; //注意，这里返回的是promise对象
}export default apiRequest;

二、units文件夹中新建api.js文件

import apiRequest from './request.js';
const HOST = 'http://www.mingmingym.com';
const API_LIST = {
all: {
method: 'POST',
url: '/e/extend/api/type.php'
},
}/*
多参数合并
*/
function MyHttp(defaultParams, API_LIST) {
let _build_url = HOST;
let resource = {};
for (let actionName in API_LIST) {
let _config = API_LIST[actionName];
resource[actionName] = (pdata) => {
let _params_data = pdata;
return apiRequest(_build_url + _config.url, _config.method, _params_data, {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8;Authorization;'
});
}
}
return resource;
}
const Api = new MyHttp({}, API_LIST);
export default Api;

三、业务中使用

import Api from '/../../utils/api.js';
.
.
.
getAll() {
Api.all({ id: 1 }).then(res => {
console.log(res);
})
}

通过对小程序网络请求方法的二次封装，使得我们的代码看上去更加的简洁，在接口的管理上也相对的便利，比如在后端修改API的路径和方法时，只需要在api.js文件中修改相应的API即可，也免去了修改时忽略了更多调用的麻烦。同时，也提高了代码的复用性，一劳永逸。
————————————————
原文链接：https://blog.csdn.net/mingcodes/article/details/103582581