💂 个人网站:【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴，请点击【前端学习交流群】
原生的wx.request()存在以下缺点：
- 回调函数嵌套过多：原生wx.request()是异步请求，需要使用回调函数获取响应结果。如果请求嵌套较多，回调函数嵌套层数会比较深，导致代码难以维护和阅读。
- 错误处理繁琐：原生wx.request()返回的结果并不一定是正确的响应数据，还可能包含网络错误、超时、认证失败等错误信息。如果不进行错误处理，这些错误信息可能导致应用程序出现异常，而原生wx.request()并不提供方便的错误处理机制。
- 不支持Promise：原生wx.request()不支持Promise异步编程模型，而是使用回调函数来处理异步请求。这使得代码难以使用现代的异步编程技术，如async/await和Promise等。
- 没有拦截器：原生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.类式封装和函数封装区别
- 类式封装的优点:
-
- 可以方便地创建多个实例，而且可以使用继承等特性来增强代码的复用性和可维护性。此外，类的定义方式也比较直观，易于理解和阅读。
缺点:
b. 是类式封装的代码比较繁琐，需要使用较多的语法来定义类和方法，而且也会占用一定的内存空 间。此外，类式封装的代码不够灵活，一旦定义好了类和方法，就比较难以修改。
- 函数式封装的优点:
-
- 是代码比较简单，易于理解和修改。而且由于函数没有副作用，所以也更加容易测试和调试。此外，函数式封装还可以使用高阶函数、柯里化等技术来增强代码的可复用性和可维护性。
缺点:
b. 是函数式封装只能创建一个实例，不如类式封装灵活。此外，函数式封装的代码不够直观，需要使用一些特殊的语法来处理参数和返回值。
综上所述，类式封装适合需要创建多个实例的场景，而函数式封装适合代码简单、灵活和可测试的场景。在实际开发中，可以根据具体情况选择合适的封装方式。
