js异步之callback简述

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,达到更大的复用性。但这样一来,代码脉络不够清晰,显得有些累赘了。
建议只有一层回调时使用这种封装方法,如果对方法有更好的设计,多层回调时也不妨一试。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容