如何优雅的封装wx.request

345 阅读3分钟

💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴,请点击【前端学习交流群】

原生的wx.request()存在以下缺点:

  1. 回调函数嵌套过多:原生wx.request()是异步请求,需要使用回调函数获取响应结果。如果请求嵌套较多,回调函数嵌套层数会比较深,导致代码难以维护和阅读。
  2. 错误处理繁琐:原生wx.request()返回的结果并不一定是正确的响应数据,还可能包含网络错误、超时、认证失败等错误信息。如果不进行错误处理,这些错误信息可能导致应用程序出现异常,而原生wx.request()并不提供方便的错误处理机制。
  3. 不支持Promise:原生wx.request()不支持Promise异步编程模型,而是使用回调函数来处理异步请求。这使得代码难以使用现代的异步编程技术,如async/await和Promise等。
  4. 没有拦截器:原生wx.request()没有拦截器机制,无法在请求发送前或响应返回后进行全局拦截、修改或重试等操作。

原生请求方式

//网络请求基本使用
onLoad() {
 wx.request({
      url: 'http://*****',
      data: {
        x: 1,
        y:2
      },
      success: (res) => {
        console.log(res)
      },
      fail: (err) => {
        console.log("err:", err);
       }
    })
}

缺点很明显,代码臃肿,回调函数过多。

使用函数式封装

首先在根目录先创建一个service文件夹,然后在service下创建index.js。代码如下:

// 封装成函数
export function requestApi(options) {
  return new Promise((resolve, reject) => {
    wx.request({ 
      ...options, 
      success: (res) => {
        resolve(res.data)
      },
      fail: reject
    })
  })
}

使用:

import { requestApi } from "../../service/index"

  onLoad() {

    // 4.将请求封装到一个单独函数中(推荐)
    this.getHomeData()
    this.getListData()

  },
//这两个函数最好放到onLoad外面
  async getHomeData() {
    const homeRes = await requestApi({ 
      url: "http://*****" 
    })
    console.log(homeRes)
  },

  async getListData() {
    const listRes = await requestApi({
      url: "http://******",
      data: { page: 1 }
    })
    console.log(listRes)
 
  },

使用类式封装

首先在根目录先创建一个service文件夹,然后在service下创建index.js。代码如下:

// 封装成类 -> 实例
class requestApi {
  constructor(baseURL) {
    this.baseURL = baseURL
  }
  request(options) {
    const { url } = options
    return new Promise((resolve, reject) => {
      wx.request({
        ...options,
        url: this.baseURL + url,
        success: (res) => {
          resolve(res.data)
        },
        fail: (err) => {
          console.log("err:", err);
        }
      })
    })
  }
  get(options) {
    return this.request({ ...options, method: "get" })
  }
  post(options) {
    return this.request({ ...options, method: "post" })
  }
}

export const requestApi = new requestApi("http://********")
//还可以创建多个实例,每个实例地址不同,例如
export const requestApi2 = new requestApi("http://********2")

使用:

import { requestApi } from "../../service/index"

onLoad() {
    // 使用类的实例发送请求
    requestApi.get({
      url: "/home/list"
    }).then(res => {
      console.log(res);
    }),
    
     //使用未封装的请求方式
    requestApi.request({ url: "/city/all" }, { method: "delete" })
    .then(res => {
      console.log(res);
    }),
    
 }

4.类式封装和函数封装区别

  1. 类式封装的优点:
    1. 可以方便地创建多个实例,而且可以使用继承等特性来增强代码的复用性和可维护性。此外,类的定义方式也比较直观,易于理解和阅读。

缺点:

b. 是类式封装的代码比较繁琐,需要使用较多的语法来定义类和方法,而且也会占用一定的内存空 间。此外,类式封装的代码不够灵活,一旦定义好了类和方法,就比较难以修改。

  1. 函数式封装的优点:
    1. 是代码比较简单,易于理解和修改。而且由于函数没有副作用,所以也更加容易测试和调试。此外,函数式封装还可以使用高阶函数、柯里化等技术来增强代码的可复用性和可维护性。

缺点:

b. 是函数式封装只能创建一个实例,不如类式封装灵活。此外,函数式封装的代码不够直观,需要使用一些特殊的语法来处理参数和返回值。

综上所述,类式封装适合需要创建多个实例的场景,而函数式封装适合代码简单、灵活和可测试的场景。在实际开发中,可以根据具体情况选择合适的封装方式。