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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,607评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,047评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,496评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,405评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,400评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,479评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,883评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,535评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,743评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,544评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,612评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,309评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,881评论 3 306
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,891评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,136评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,783评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,316评论 2 342

推荐阅读更多精彩内容