目录
1、封装的必要性
在编写前端代码时,最离不开的就是发送网络请求了,但在发送网络请求时,许多内容都是重复使用的。会造成代码的冗余,例如,我们在网络请求失败的时候,可能都是只需要提示一下请求失败就好了。
1.1封装的原则
我们在封装时,把各个请求相同的部分进行封装就好了,不同的地方要保留住。例如,我们对于各个请求成功后,可能会根据返回的数据进行不同的处理,此时就需要保留请求成功后的数据处理能力。
1.2微信小程序封装遇到的问题
首先,我们先看看我最开始的封装
//工具类
class tool{
//检查登入状态,只返回是否登入
checkLogin(){
var login=wx.getStorageSync('loginRole')
if(login==""){
return false
} else {
return true
}
}
//发起网络请求
getRequest(url,params){
var result
wx.showLoading({ // 请求提示
title: '加载中...',
})
wx.request({
url: "http://192.168.10.13:8081/" + url, // 请求url地址
data: params.data || {}, // 请求参数
header: params.header || {}, // 请求头
method: params.method || 'GET', // 请求方式
dataType: 'json', // 返回数据类型
success:(res)=>{
this.result=res
},
fail: (err)=> {
wx.hideLoading();
wx.showToast({ // 提示错误信息
title: '网络错误',
icon:'error'
})
}
})
return result
}
}
export {tool}
我将request请求封装在了一个工具类之中,并希望在请求成功后,能将结果返回,不成功则返回一个未定义。然而真正运行的时候你会发现,无论是否成功都返回的是未定义。这是因为success与fail都是回调函数,既先完成外面的函数后,再回过头来执行这两个函数的其中一个。也就是说,return result要先于this.result=res执行。这一点非常重要,也就意味着,我们的res的值还没赋值给result呢,它就直接返回了。
1.3改进封装,使得能对拿到的结果进行不同的处理
仔细想一想,其实我们的最终目的是要对不同的结果进行不同的处理,那我们也不一定要把这个结果拿到来再进行处理。可以直接将不同的处理逻辑——函数作为一个参数传入。因此就有了以下的改进。
//工具类
class tool{
//检查登入状态,只返回是否登入
checkLogin(){
var login=wx.getStorageSync('loginRole')
if(login==""){
return false
} else {
return true
}
}
//发起网络请求
getRequest(url,params,success){
wx.showLoading({ // 请求提示
title: '加载中...',
})
wx.request({
url: "http://192.168.10.13:8081/" + url, // 请求url地址
data: params.data || {}, // 请求参数
header: params.header || {}, // 请求头
method: params.method || 'GET', // 请求方式
dataType: 'json', // 返回数据类型
success:success,
fail: (err)=> {
wx.hideLoading();
wx.showToast({ // 提示错误信息
title: '网络错误',
icon:'error'
})
}
})
}
}
export {tool}
改进后我们发现,sucess函数不再是写死的了,我们在调用这个request时,就可以根据不同的需求,对res进行不同的操作了。
1.4最终调用
new tool().getRequest('user/login',params,(res)=> {
wx.hideLoading(); // 关闭请求提示
console.log(res)
})
这里我只是进行的输出,开始时大家根据不同的需求进行不同的处理就可以了。话说回来,这个封装怎么感觉有点面向切面编程的思想在里面呢!
结束语
给个点赞吧,谢谢了!!!