js及nodejs由于其单线程特性,对于应用中比较耗时的网络请求、磁盘操作均已异步形式完成。因此,经常看到如下形式
getLocation(res){
if(res.ok){
login(res){
if(res.ok){
setState()
}
}
}
}
getLocation成功后才能执行login操作,login成功后才能setState更新数据
如果中间还要添加会阻塞当前应用进程的操作,且其数据依赖于上一部操作成功返回的结构,就需要写在上一步的成功回调下,这样嵌套层级越来越多,就会陷入所谓的“回调地狱”。对于此类问题的解决,有es6的promise和es7的async/await,这里,我们不研究深层次的回调问题,只讨论当遇到这种情况时,如何将其封装成一个模块达到重复利用。
以常用的fetch为例
export default function _update(url, data, callback){
let init = {
credentials: 'include',
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
mode: 'cors',
body: JSON.stringify(data)
}
fetch(url, init)
.then(res => res.json())
.then(res => {
// fetch请求得到相应,根据回传的res执行下一步操作
callback(res)
})
}
_update为封装的一个通用fetch模块,接受请求url,请求时发送给服务端的数据,以及请求成功时需要执行的回调函数三个参数。callback的传递保证fetch在服务端有数据返回后调用,因此,可以像如下形式使用这个模块。
import update from 'update.js'
update('https://xxx', {
name: 'xm',
age: 12
}, res => {
console.log(res)
})
传递给update三个参数,对应于模块中的形参。
调用函数中第三个函数参数
res => {
console.log(res)
}
对应于模块中的callback(res),相当于
function callback(res){
console.log(res)
}
如果在update前先要获取到当前位置
function getLocation(callback){
......
if(res){
callback(url)
}
}
如果获取位置成功,将位置信息res传递给update函数,update在fetch请求得到相应后刷新数据,那么将getLocation改造成如下即可
function getLocation(callback){
......
if(res){
callback('https://xxx', {
location: res
}, res => {
cosole.log(res)
})
}
}
两个res,一个是获取到位置回传的res,另一个是fetch请求相应回传的res
调用只需要一行代码
getLocation(update)
可以将update的三个参数传递给getLocation,达到更大的复用性。但这样一来,代码脉络不够清晰,显得有些累赘了。
建议只有一层回调时使用这种封装方法,如果对方法有更好的设计,多层回调时也不妨一试。