小程序服务器接口封装,小程序request的封装

wx.request 的封装

小程序提供了request的网络接口，用于服务器交互。但是我们在开发的过程中发现了以下问题：

每个页面中都要去写一些重复的相关配置，比如header

没有统一的loading提示管理

没有统一的错误处理机制

页面逻辑与请求服务器代码混在一起，比较混乱，不好调试

统一header问题

发起请求时，服务器有些接口需要验证用户身份，一般是会把用户登录之后的token设置在header中，回传给服务器，我们可以写一个通用的方法：

/**

* 获取header

*/

function getCommonHeader() {

let header = {

'Content-type': 'application/x-www-form-urlencoded'

};

// 如果token有值则带上

let token = wx.getStorageSync("token");

if (token) {

header = Object.assign({}, header, {

'Authorization': 'Bearer ' + token

});

}

return header;

};

统一loading管理

为了防止用户多次点击以及更好的用户体验，一般发起请求时会加上loading动画，服务器返回之后再去掉这个loading。但是产品设计时也有不加loading动画和自定义loading文字的需求，所以我们可以添加一个控制开关 showLoading 和 loadingTitle ，由外部调用时设置。

统一错误处理机制

这里需要和服务器约定统一返回结果格式，比如：

{"code": 0, "data": "", "msg": "ok"}

解释一下：

code 表示本次请求的状态码

data 是服务器返回的数据

msg 业务错误提示

首先对此次请求的http状态判断，非 200 则表示此次请求失败了，可能是 500 服务器报错，也可能是 404 请求服务器url未找到等等。

接着对业务状态判断，这个由服务器约定，比如 0 表示成功，非 0 则表示业务错误，一般直接 toast 提示服务器返回的 msg 就可以了，这样就对服务器错误进行了统一处理。

但是和 loading 一样，有些页面需要有特殊的错误处理，这时我们也添加一个控制开关 showToast ，由调用时控制是否显示统一的错误信息。

接口promise化

为了调用时少些回调，我们把这个request接口包装成一个promise，调用时直接使用 then 和 catch 来处理业务。最终的代码如下：

/**

* 网络请求

*/

function request(url, data = {}, header = {}, method = "POST", config = {}) {

// header 空值处理

let _header = {

"content-type": "application/x-www-form-urlencoded"

};

if (Object.keys(header).length > 0) {

_header = header;

}

let showToast = true,

showLoading = false,

loadingTitle = "加载中。。。";

// 默认显示toast

if (config['showToast'] != undefined && config['showToast'] == false) {

showToast = false;

}

// 默认显示loading

if (config['showLoading'] != undefined && config['showLoading'] == true) {

showLoading = true;

}

if (config['loadingTitle']) {

loadingTitle = config['loadingTitle'];

}

return new Promise((resolve, reject) => {

// 是否显示loading

if (showLoading) {

wx.showLoading({ title: loadingTitle, icon: 'none', mask: true });

}

wx.request({

url: url,

data: data,

header: _header,

method: method,

success: (res => {

if (showLoading) {

wx.hideLoading();

}

// 服务器 非200 错误

if (res.statusCode && res.statusCode != 200) {

wx.showToast({ title: '服务器 ' + res.statusCode + ' 错误', icon: 'none' });

reject(res);

return;

}

if (res.data && res.data.code != 0) {

// 业务状态非0 是否提示

if (showToast) {

wx.showToast({ title: res.data.msg, icon: 'none' });

}

reject(res);

return;

}

resolve(res.data);

}),

fail: (err => {

if (showLoading) {

wx.hideLoading();

}

if (err.errMsg.indexOf('url not in domain list') > -1) {

wx.showToast({ title: '请求url不在合法域名中，请打开调试模式', icon: 'none' });

}

reject(err);

})

});

});

};

对于 get 请求和 post 请求我们再包装一下

/**

* get 网络请求

*/

function getRequest(url, data = {}, header = {}, config = {}){

return request(url, data, "GET", header, config);

}

/**

* post 网络请求

*/

function postRequest(url, data = {}, header = {}, config = {}){

return request(url, data, "POST", header, config);

}

我们看看调用的例子，将上面封装好的request函数放到 utils.js里面，新建一个api.js文件：

const utils = require('../utils.js');

module.exports = {

getUserInfo: function(data, config = {}){

return utils.postRequest(

'http://api.xx.com/get_user_info',

data,

utils.getCommonHeaders(),

config

);

}

}

然后页面调用：

const api = require('../api.js');

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

api.getUserInfo({

"user_id": "1"

}, {

"showLoading": "false",

"showToast": "false",

"loadingTitle": "登录中"

})

.then(res => {

console.log(res);

});

}

一般情况下上面的 showLoading 参数等配置项可以不写，用默认就行，那页面就更简洁了

const api = require('../api.js');

api.getUserInfo({"user_id": "1"})

.then(res => {

console.log(res);

});