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

01 基础request

article 2024/11/14 3:08:11

类 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