当前位置：首页 > news >正文

01 基础request

news 2024/11/14 1:00:28

类 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