01 基础request
目录
类 WxRequest 的定义
静态属性 default
构造函数 constructor
方法 request
HTTP 方法封装
创建 WxRequest 实例并导出
完整代码：
类 WxRequest 的定义
创建一个 WxRequest 类包含一个静态属性 default 和几个方法，用于处理网络请求。
静态属性 default
static default = {baseURL: '', // 默认基础URLmethod: '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: '', // 默认基础URLmethod: '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) {// 拼接完整的URLoptions.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', // 设置基础URLtimeout: 60000 // 设置超时时间
});export default instance;拦截器的创建请看文章 :
02 创建拦截器-CSDN博客在实例化WxRequest类之后，可以通过修改和方法来配置具体的拦截器逻辑。// 配置请求拦截器// 在发送请求之前做些什么// 响应拦截器// 对响应数据做点什么这样，拦截器就被成功添加到了WxRequest类中，并且可以在请求前和响应后执行自定义逻辑。在请求拦截器中，你可以修改请求配置，例如添加头部信息；在响应拦截器中，你可以根据响应数据进行一些处理，例如提取响应数据中的data属性。请求拦截器：获取 token 并加入请求头；https://blog.csdn.net/everfoot/article/details/142441601