JavaScript 异步调用框架 (Part 1 - 问题 & 场景)

 更新时间:2009年08月03日 23:50:56   作者:  
在Ajax应用中,调用XMLHttpRequest是很常见的情况。特别是以客户端为中心的Ajax应用,各种需要从服务器端获取数据的操作都通过XHR异步调用完成。
问题
在Ajax应用中,调用XMLHttpRequest是很常见的情况。特别是以客户端为中心的Ajax应用,各种需要从服务器端获取数据的操作都通过XHR异步调用完成。然而在单线程的JavaScript编程中,XHR异步调用的代码风格实在是与一般的JavaScript代码格格不入。

额外参数
考虑一个除法函数,如果它是纯客户端的同步函数,那么签名会是这样的:

function divide(operand1, operand2)

然而假设我们对客户端除法的精度不满意,于是把除法转移到服务器端来执行,那么它是个需要调用XHR的异步函数,签名也就可能会是以下几种之一:
复制代码 代码如下:

function divide(operand1, operand2, callback)
function divide(operand1, operand2, successCallback, failureCallback)
function divide(operand1, operand2, options)


我们必须在签名中引入新的参数来传递回调函数,不能选择让函数变成阻塞式的同步调用。

可传递性
不仅仅直接操作XHR的函数需要引入新的参数,这种复杂性还会顺着调用栈向外传递。例如说,我们对加减乘除四则运算作了封装,只向外暴露一个运算接口:

function calculate(operand1, operand2, operator)

这个calculate函数根据operator参数来调用内部的plus, subtract, multiply, divide函数。然而,因为divide函数变成了异步函数,所以整个calculate函数不得不也转变为异步函数:

function calculate(operand1, operand2, operator, callback)

同时,在调用栈之上凡是需要调用到calculate的函数,都必须变成异步的,除非它并不需要向上一级调用函数返回结果。

同步并存
尽管calculate函数变成了一个异步函数,它所调用的plus, subtract, multiply函数还是同步函数,只有调用divide时是异步的,这时候calculate就是一个异步同步并存函数。

这会带来什么问题?calculate的调用者看到函数签名自然会认为calculate是个异步函数,因为它需要传递回调函数,然而calculate的执行方式却是不确定的。考虑如下调用:

calculate(operand1, operand2, operator, callback);
next();

这里涉及到callback和next两个函数,它们哪个先执行哪个后执行是不确定的,或者说是依赖于calculate具体实现的。

如果calculate的实现是,当不需要进行异步操作时,直接调用callback。那么,在执行加减乘法时callback会在next之前被调用;在执行除法时next会在callback之前调用。

如果我们不喜欢这种不确定性,我们可以改变一下calculate的实现,把同步调用也都改为setTimeout形式的,这样在任何情况下next都一定会在callback之前被调用。

然而后面一种做法依赖于成本较高的实现方式,开发者一个不小心(或者摆明偷懒)就会漏掉setTimeout,导致函数调用顺序变得不确定,所以我们会希望这是框架帮助实现的功能,在使用框架时无法把这绕过。

场景
在这里,我举一个关于上述问题的具体应用场景。(为简化问题,描述已略作修改,与实际应用并不一致。)

在百度Hi网页版里面,我们会在客户端保存一个用户对象列表,在打开和这个用户的聊天窗口时,我们需要从中读取这个用户的信息。这个操作就涉及很多可能同步又可能异步的分支:

用户对象未缓存
异步读取用户信息
用户对象已缓存
用户是好友(信息更新会由服务器端推送)
同步读取用户信息
用户不是好友(信息更新需要由客户端拉取)
可以接受缓存信息
同步读取用户信息
必须获取最新信息
异步读取用户信息
可以看到,分支的结果最终既有同步的,也有异步的。并且这些分支还不是在一个函数里完成,而是在几个函数里实现。也就是说,按照传统的模式,这些函数一部分是同步的,一部分是异步的,由于异步的传递性,最终调用栈顶层的函数都是异步的。

为了解决这个问题,我们需要写一个异步调用框架,用一种统一的方式来进行调用,把同步和异步调用都合并为一种返回方式。

相关文章

  • 通过手写instanceof理解原型链示例详解

    通过手写instanceof理解原型链示例详解

    这篇文章主要为大家介绍了通过手写instanceof理解原型链示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • JS常用知识点整理

    JS常用知识点整理

    本篇文章主要介绍了javascript的知识点。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 微信小程序实现多张图片上传功能

    微信小程序实现多张图片上传功能

    这篇文章主要为大家详细介绍了微信小程序实现多张图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JavaScript 模块化详解

    JavaScript 模块化详解

    这篇文章主要介绍了JavaScript 模块化详解,块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信,下面一起进入文章来接更多详细内容
    2021-12-12
  • JS 实现10进制转换36进制的示例代码

    JS 实现10进制转换36进制的示例代码

    这篇文章主要介绍了JS实现10进制转换36进制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 微信小程序canvas动态时钟

    微信小程序canvas动态时钟

    这篇文章主要为大家详细介绍了微信小程序canvas动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • javascript Object与Function使用

    javascript Object与Function使用

    Object instanceof Function 还是 Function instance of Object,是真是假,一一道来
    2010-01-01
  • JavaScript定时器常见用法实例分析

    JavaScript定时器常见用法实例分析

    这篇文章主要介绍了JavaScript定时器常见用法,结合实例形式分析了JavaScript定时器常见功能、应用及相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)

    js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)

    js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(暂只IE下有效)
    2009-01-01
  • Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。下面通过本文给大家介绍Bootstrap 轮播(Carousel)插件,非常不错,需要的朋友参考下吧
    2016-12-12

最新评论