网络请求封装

01. request实例方法

创建 WxReauest 类

// 创建 WxReauest 类
// 通过类的的方式来进行封装，会让代码更加具有复用性，也可以方便添加新的属性和方法
class WxRequest {
  // 用于创建和初始化类的属性和方法
  constructor() {

  }

  request(options) {
    // request 实例方法接收一个对象类型的参数
    // 属性值和 wx.request 方法调用时传递的参数保持一致
    return new Promise((resolve, reject) => {
      // 需要使用 Promise 封装 wx.request，处理异步请求
      wx.request({
        ...options,

        // 当接口调用成功时会触发 success 回调函数
        success: (res) => {
          resolve(res)
        },

        // 当接口调用失败时会触发 fail 回调函数
        fail: (err) => {
          reject(err)
        }
      })
    })
  }
}

// 对 WxRequest 进行实例化
const instance = new WxRequest()

// 将 WxRequest 实例进行暴露出去，方便在其它文件中进行调用
export default instance

调用方式

（1）通过 .then 的方式进行调用

instance.request({
	url: "http://api.codebetter.cn/getHome",
	method: "GET"
}).then((res)=>{
	console.log(res)
})

（2）通过 async/await 的方式调用

async testRequest() {
  const res = await instance.request({
    url: 'http://api.codebetter.cn/getHome',
    method: 'GET'
  })
  console.log(res)
}

02 设置请求参数

在发起网络请求时，需要配置一些请求参数，其中有一些参数我们可以设置为默认参数，例如：请求方法、超时时长等等，因此我们在封装时要定义一些默认的参数

请求参数的设置有三种方式：

1. 默认参数：在 WxRequest 类中添加 defaults 实例属性来设置默认值
2. 实例化时设置参数：在对 WxRequest 类进行实例化时传入相关的参数，需要在 constructor 构造函数形参进行接收
3. 调用实例方法时传入请求参数

默认参数和自定义参数的合并操作，通常会在 constructor 中进行

因此，我们就在 constructor 中将开发者传入的相关参数和 defaults 默认值进行合并，需要传入的配置项覆盖默认配置项

// 创建 WxReauest 类
// 通过类的的方式来进行封装，会让代码更加具有复用性，也可以方便添加新的属性和方法
class WxRequest {
  // 定义实例属性，用来设置默认请求参数
  defaults = {
    baseURL: "", // 请求基准地址
    url: "", // 接口请求路径
    data: null, // 请求参数
    method: "GET", // 默认的请求方法
    // 请求头
    header: {
      "Content-type": "application/json", // 数据的交互格式
    },
    timeout: 60000, // 小程序的默认超时时长是一分钟
  };

  // 用于创建和初始化类的属性和方法
  // 在实例化时传入的参数，会被 constructor 形参进行接收
  constructor(params = {}) {
    // 通过 Object.assign 方法合并请求参数
    this.defaults = Object.assign({}, this.defaults, params);
  }

  // request 实例方法接收一个对象类型的参数
  // 属性值和 wx.request 方法调用时传递的参数保持一致
  request(options) {
    // 合并完整的请求路径
    options.url = this.defaults.baseURL + options.url;
    // 合并请求参数
    options = { ...this.defaults, ...options };

    // 需要使用 Promise 封装 wx.request，处理异步请求
    return new Promise((resolve, reject) => {
      wx.request({
        ...options,

        // 当接口调用成功时会触发 success 回调函数
        success: (res) => {
          resolve(res);
        },

        // 当接口调用失败时会触发 fail 回调函数
        fail: (err) => {
          reject(err);
        },
      });
    });
  }
}

// 对 WxRequest 进行实例化
const instance = new WxRequest({
  baseURL: "http://112.125.120.186:3000",
  timeout: 15000,
});

// 将 WxRequest 实例进行暴露出去，方便在其它文件中进行调用
export default instance;

03 封装请求快捷方法

在 request() 方法的基础上封装一些快捷方法，简化 request() 的调用

需要封装四个快捷方法，分别是 get、delete、post、put，这四个方法都是通过实例化的方式进行调用，所以需要在 WxRequest 类中暴露出来

instance.get('请求地址', '请求参数', '请求配置')
instance.delete('请求地址', '请求参数', '请求配置')
instance.post('请求地址', '请求参数', '请求配置')
instance.put('请求地址', '请求参数', '请求配置')

实现

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));
}

04 wx.request 注意事项

在使用 wx.request 发送网络请求时，只要成功接收到服务器返回的结果，无论status状态码是多少，都会进入 success 回调，开发者则需要根据业务逻辑，自已进行相关逻辑的判断。

一般只有网络出现异常、请求超时等时候才会走fail回调

05 定义请求/响应拦截器

为了方便统一处理请求参数以及服务器响应结果，为 WxRequest 添加拦截器功能，拦截器包括 请求拦截器 和 响应拦截器。

• 请求拦截器本质上是在请求之前调用的函数，用来对请求参数进行新增和修改
• 响应拦截器本质上是在响应之后调用的函数，用来对响应数据做点什么

注意：不管是成功响应还是失败响应，都会执行响应拦截器

拦截器的使用方法

// 请求拦截器
instance.interceptors.request = (config) => {
  // 在发送请求之前做些什么
  return config
}

// 响应拦截器
instance.interceptors.response = (response) => {
  // 对响应数据做点什么
  return response
}