如何封装 WxRequest 类提升代码复用性
在小程序时，封装请求类可以大大提高代码的复用性和可维护性。通过类的方式封装请求逻辑，不仅能方便地添加新属性和方法，还能让代码结构更加清晰。下面我们详细讲解如何封装一个 WxRequest 类。
定义 WxRequest 类
首先，我们通过 class 关键字定义一个 WxRequest 类。类的封装方式可以让代码更具复用性，尤其是在需要扩展功能时，直接添加新的属性和方法即可。
class WxRequest {
// 定义实例属性，设置默认请求参数
defaults = {
baseURL: '', // 请求基准地址
url: '', // 接口的请求路径
data: null, // 请求参数
method: 'GET', // 默认的请求方法
header: {
'Content-type': 'application/json' // 设置数据的交互格式
},
timeout: 60000, // 默认的超时时长
isLoading: true // 控制是否使用默认的 loading
};
// 定义拦截器对象
interceptors = {
request: (config) => config, // 请求拦截器
response: (response) => response // 响应拦截器
};
// 定义数组队列，存储请求标识
queue = [];
// 构造函数，用于初始化类的属性
constructor(params = {}) {
// 合并请求参数
this.defaults = Object.assign({}, this.defaults, params);
}
}
实现 request 方法
request 方法是 WxRequest 类的核心，它负责处理实际的请求逻辑。我们通过 Promise 封装 wx.request，以便更好地处理异步请求。
request(options) {
// 清除上一次的定时器
this.timerId && clearTimeout(this.timerId);
// 合并完整的请求地址
options.url = this.defaults.baseURL + options.url;
// 合并请求参数
options = { ...this.defaults, ...options };
// 显示 loading 效果
if (options.isLoading && options.method !== 'UPLOAD') {
this.queue.length === 0 && wx.showLoading();
this.queue.push('request');
}
// 调用请求拦截器
options = this.interceptors.request(options);
// 返回 Promise 对象
return new Promise((resolve, reject) => {
if (options.method === 'UPLOAD') {
wx.uploadFile({
...options,
success: (res) => {
res.data = JSON.parse(res.data);
const mergeRes = Object.assign({}, res, {
config: options,
isSuccess: true
});
resolve(this.interceptors.response(mergeRes));
},
fail: (err) => {
const mergeErr = Object.assign({}, err, {
config: options,
isSuccess: false
});
reject(this.interceptors.response(mergeErr));
}
});
} else {
wx.request({
...options,
success: (res) => {
const mergeRes = Object.assign({}, res, {
config: options,
isSuccess: true
});
resolve(this.interceptors.response(mergeRes));
},
fail: (err) => {
const mergeErr = Object.assign({}, err, {
config: options,
isSuccess: false
});
reject(this.interceptors.response(mergeErr));
},
complete: () => {
if (options.isLoading) {
this.queue.pop();
this.queue.length === 0 && this.queue.push('request');
this.timerId = setTimeout(() => {
this.queue.pop();
this.queue.length === 0 && wx.hideLoading();
clearTimeout(this.timerId);
}, 1);
}
}
});
}
});
}
封装常用的 HTTP 方法
为了方便使用，我们可以封装常用的 HTTP 方法，如 GET、POST、PUT、DELETE 等。这些方法本质上都是调用 request 方法，只是传递的参数不同。
get(url, data = {}, config = {}) {
return this.request(Object.assign({ url, data, method: 'GET' }, config));
}
delete(url, data = {}, config = {}) {
return this.request(Object.assign({ url, data, method: 'DELETE' }, config));
}
post(url, data = {}, config = {}) {
return this.request(Object.assign({ url, data, method: 'POST' }, config));
}
put(url, data = {}, config = {}) {
return this.request(Object.assign({ url, data, method: 'PUT' }, config));
}
处理并发请求
有时候我们需要同时发送多个请求，可以使用 Promise.all 来处理并发请求。all 方法接收多个 Promise 对象，并返回一个新的 Promise，当所有请求都完成时，才会触发 resolve。
all(...promise) {
return Promise.all(promise);
}
封装文件上传方法
小程序中文件上传是一个常见的需求，我们可以通过 wx.uploadFile 方法来实现文件上传功能。为了方便使用，我们可以将其封装到 WxRequest 类中。
upload(url, filePath, name = 'file', config = {}) {
return this.request(
Object.assign({ url, filePath, name, method: 'UPLOAD' }, config)
);
}
总结
通过封装 WxRequest 类，我们可以大大简化小程序中的请求逻辑。类的方式不仅让代码更具复用性，还能方便地扩展功能。无论是处理普通请求还是文件上传，都可以通过这个类轻松实现。希望这篇文章能帮助你更好地理解如何封装请求类，提升效率。
© 版权声明
本站文章均来自于网络，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，核实后本网站将在24小时内删除侵权内容。邮箱：dxsen@qq.com
THE END
