自从微信小程序推出后，越来越多的企业和个人选择使用微信小程序进行开发，海量的小程序开发者们在使用 wx.request() 方法时可能会发现，经常需要书写重复的代码，效率不够高，不便于维护。今天我们就来讲解一下如何封装 wx.request() 方法，提高代码效率。
一、封装wx.request()的目的
在小程序中使用wx.request() 发送 HTTP 请求是非常常见的操作。当我们在发送请求时，有很多参数我们是不需要每次都写的，例如：请求方式、请求类型、请求地址等。所以我们编写一些基础代码，封装好wx.request()，代码更加简洁，易于维护。
二、wx.request()封装实现
首先，我们先创建一个api.js文件，用来存放所有接口地址。这样，如果我们更换了服务器地址，或是修改了api接口，只需要在这个文件中修改即可。
// api.js
var API_BASE_URL = "https://www.example.com";
var api = {
loginUrl: `${API_BASE_URL}/user/login`, // 登录接口
userInfoUrl: `${API_BASE_URL}/user/userInfo` // 用户信息接口
};
module.exports = api;
接下来，我们来封装 wx.request() 方法。使用Promise语法，让请求更为简单明了。
function request(url, method, data, header = {}) {
return new Promise((resolve, reject) => {
wx.showLoading({
title: '加载中...'
});
wx.request({
url: url,
method: method,
data: data,
header: header,
success: function(res) {
wx.hideLoading();
resolve(res.data);
},
fail: function(err) {
wx.hideLoading();
reject(err);
}
});
});
}
module.exports = {
request: request
};
封装好的代码非常简单。我们使用一个Promise语法，返回一个promise对象。它接收四个参数：URL、方法、数据、头部。在发送前，我们使用wx.showLoading()显示加载动画；在请求成功或失败，我们都使用wx.hideLoading()关闭加载动画；在成功时，通过resolve，将请求数据返回；在失败时，通过reject返回错误信息。
三、使用方法
我们来演示一下如何使用我们封装好的wx.request()。首先，在导入api.js和request.js之后，可以直接调用 request()方法，如下所示：
const api = require('./api.js');
const request = require('./request.js');
request.request(api.loginUrl, 'POST', { username: 'admin', password: 'admin' })
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
相信大家已经看懂了如何使用封装好的request()方法了。对比之前的写法，我们将很多代码集中在了一起。现在，只要使用request()方法调用接口，就能优雅地发起请求，代码也更易于维护。
四、总结
本篇文章中，我们介绍了如何封装 wx.request() 方法，提高了发送HTTP请求的效率。而且这种做法非常适用于对于API调用次数比较多的小程序。大家在开发小程序的时候，也可以尝试将常用的方法进行封装，避免重复代码，提高代码的复用性和可维护性。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/246328.html
微信扫一扫 
支付宝扫一扫 