目录
类 WxRequest 的定义
静态属性 default
构造函数 constructor
方法 request
HTTP 方法封装
创建 WxRequest 实例并导出
完整代码：
类 WxRequest 的定义
创建一个 WxRequest 类包含一个静态属性 default 和几个方法，用于处理网络请求。
静态属性 default
static default = {
baseURL: '', // 默认基础URL
method: 'GET', // 默认请求方法
header: {
'content-type': 'application/json', // 默认的请求头内容类型
},
data: null, // 默认请求数据
timeout: 60000, // 默认超时时间（毫秒）
}baseURL是API请求的基础URL，所有通过该类发起的请求都会在这个基础上进行。method定义了默认的HTTP请求方法，这里设置为GET。header包含了默认的请求头，这里设置了默认的Content-Type为application/json。data是默认的请求数据，这里设置为null。timeout定义了请求的超时时间，这里设置为60秒。
构造函数 constructor
constructor(params = {}) {
WxRequest.default = { ...WxRequest.default, ...params };
}- 构造函数接受一个参数
params，它是一个对象，用于覆盖默认配置。通过展开运算符...，我们可以将传入的params与默认配置合并，形成最终的配置。
方法 request
request(options) {
options.url = WxRequest.default.baseURL + options.url;
const finalOptions = { ...WxRequest.default, ...options };
return new Promise((resolve, reject) => {
wx.request({
...finalOptions,
success: resolve,
fail: reject,
})
})
}request方法是核心方法，它接收一个options对象，包含了请求的具体信息。- 首先将
options.url与baseURL拼接，形成完整的请求URL。 - 然后将默认配置与传入的
options合并，形成最终的请求配置finalOptions。 - 使用
wx.request发起请求，并返回一个Promise对象，这样就可以在调用request方法的地方使用.then()和.catch()来处理成功和失败的响应。
HTTP 方法封装
为常见的HTTP方法 GET, POST, PUT, DELETE 提供封装：
get(url, data, config) {
return this.request(
Object.assign({
url,
method: 'GET',
data,
}, config)
)
}
// post, put, delete 方法类似- 这些方法内部调用了
request方法，并提供了默认的method和data。 - 使用
Object.assign将传入的配置与默认配置合并，并传递给request方法。
创建 WxRequest 实例并导出
const instance = new WxRequest({
baseURL: 'https://gmall-prod.atguigu.cn/mall-api',
timeout: 60000
});
export default instance;- 创建了一个
WxRequest的实例instance，并传入了基础配置，包括baseURL和timeout。 - 使用
export default将实例导出，这样在其他文件中可以通过导入instance来使用封装好的网络请求方法。
这个封装允许在小程序的任何地方复用instance实例，而不必每次都重新配置基础信息，使得代码更加模块化和可维护。
为了方便统一处理请求参数以及服务器响应结果，我们需要为 WxRequest 添加拦截器功能，拦截器包括 请求拦截器 和 响应拦截器
完整代码：
class WxRequest {
// 默认配置对象
static default = {
baseURL: '', // 默认基础URL
method: 'GET', // 默认请求方法
header: {
'content-type': 'application/json', // 默认的请求头内容类型
},
data: null, // 默认请求数据
timeout: 60000, // 默认超时时间（毫秒）
}
/**
* 构造函数，用于创建WxRequest实例
* @param {Object} params - 构造函数参数，用于覆盖默认配置
*/
constructor(params = {}) {
WxRequest.default = { ...WxRequest.default, ...params };
}
/**
* 发起网络请求的方法
* @param {Object} options - 请求选项，包括url、method、header、data等
* @returns {Promise} - 返回一个Promise对象，用于处理请求的响应
*/
request(options) {
// 拼接完整的URL
options.url = WxRequest.default.baseURL + options.url;
// 合并默认配置和请求配置
const finalOptions = { ...WxRequest.default, ...options };
return new Promise((resolve, reject) => {
wx.request({
...finalOptions,
success: resolve, // 直接使用resolve作为成功回调
fail: reject, // 直接使用reject作为失败回调
})
})
}
// 封装GET实例方法
get(url, data, config) {
return this.request(
Object.assign({
url,
method: 'GET',
data,
}, config)
)
}
post(url, data, config) {
return this.request(
Object.assign({
url,
method: 'POST', //
data,
}, config)
)
}
put(url, data, config) {
return this.request(
Object.assign({
url,
method: 'PUT', //
data,
}, config)
)
}
delete(url, data, config) {
return this.request(
Object.assign({
url,
method: 'DELETE', //
data,
}, config)
)
}
// 其他方法(post, put, delete)保持不变...
}
// 创建WxRequest实例，并传递基础配置
const instance = new WxRequest({
baseURL: 'https://gmall-prod.atguigu.cn/mall-api', // 设置基础URL
timeout: 60000 // 设置超时时间
});
export default instance;
拦截器的创建请看文章 :
02 创建拦截器-CSDN博客在实例化WxRequest类之后，可以通过修改和方法来配置具体的拦截器逻辑。// 配置请求拦截器// 在发送请求之前做些什么// 响应拦截器// 对响应数据做点什么这样，拦截器就被成功添加到了WxRequest类中，并且可以在请求前和响应后执行自定义逻辑。在请求拦截器中，你可以修改请求配置，例如添加头部信息；在响应拦截器中，你可以根据响应数据进行一些处理，例如提取响应数据中的data属性。请求拦截器：获取 token 并加入请求头；https://blog.csdn.net/everfoot/article/details/142441601
