关于js的异步调用思想理解——从C到js

js的异步调用
js的异步调用很重要，凡是涉及到网络调用和事件机制的代码都会用到它。第一眼看上去的时候异步调用很特别，和之前设计程序使用的同步调用方法很不一样。实质上他们之前的区别没有相像中那么大。本文尝试用几个例子说明同步程序是如何向异步程序演变的。
从C/C++的同步调用开始
1 使用C语言的编码方式实现调用访问远程的接口
view plaincopy to clipboardprint?
01.int get_data() 
02.{ 
03.    char bufCmd[]="cmd=1001&uin=123456?m=abc"; 
04.    char bufRcv[4096]; 
05.    socket s = new Socket(); 
06.    Connnect(s, ip, port); 
07.    send(s, bufCmd); 
08.    recv(s, bufRcv); 
09.    use(bufRcv); 
10.    return 0; 
11.} 
int get_data()
{
    char bufCmd[]="cmd=1001&uin=123456?m=abc";
    char bufRcv[4096];
    socket s = new Socket();
    Connnect(s, ip, port);
    send(s, bufCmd);
    recv(s, bufRcv);
    use(bufRcv);
    return 0;
}
2 将通信过程封装成独立的函数，简化业务流程代码
view plaincopy to clipboardprint?
01.// 发包收包的过程 
02.int send_and_recv(struct addr, char* bufCmd, char* bufRcv) 
03.{ 
04.    socket s = new Socket(); 
05.    Connnect(s, addr.ip, addr.port); 
06.    send(s, bufCmd); 
07.    recv(s, bufRcv); 
08.} 
09.// 原来的业务流程 
10.int get_data_v2() 
11.{ 
12.    char bufCmd[]="cmd=1001&uin=123456?m=abc"; 
13.    char bufRcv[4096]; 
14.    // addr={ip, port} 
15.    send_and_recv(addr, bufCmd, bufRcv); 
16.    use(bufRcv); 
17.    return 0; 
18.} 
// 发包收包的过程
int send_and_recv(struct addr, char* bufCmd, char* bufRcv)
{
    socket s = new Socket();
    Connnect(s, addr.ip, addr.port);
    send(s, bufCmd);
    recv(s, bufRcv);
}
// 原来的业务流程
int get_data_v2()
{
    char bufCmd[]="cmd=1001&uin=123456?m=abc";
    char bufRcv[4096];
    // addr={ip, port}
    send_and_recv(addr, bufCmd, bufRcv);
    use(bufRcv);
    return 0;
}
3 将通信过程变成异步调用
view plaincopy to clipboardprint?
01.// 变成异步调用以后，原来的调用过程分成了两段 
02.// 前半段组装参数调用发包过程 
03.// 后半段处理返 
04.// 这里假设send_and_recv是一个异步的网络通信函数 
05.void get_data_v3() 
06.{ 
07.    char bufCmd[]="cmd=1001&uin=123456?m=abc"; 
08.    char bufRcv[4096]; 
09.    send_and_recv_async(addr, bufCmd, bufRcv, callback);  } // end of get_data_v4 
10.// definition of call back function 
11.int callback(char* bufRcv) { 
12.    use(bufRcv); 
13.    return 0; 
14.} 
// 变成异步调用以后，原来的调用过程分成了两段
// 前半段组装参数调用发包过程
// 后半段处理返
// 这里假设send_and_recv是一个异步的网络通信函数
void get_data_v3()
{
    char bufCmd[]="cmd=1001&uin=123456?m=abc";
    char bufRcv[4096];
    send_and_recv_async(addr, bufCmd, bufRcv, callback);  } // end of get_data_v4
// definition of call back function
int callback(char* bufRcv) {
    use(bufRcv);
    return 0;
}
4 假设处理结果的时候依赖外部参数
view plaincopy to clipboardprint?
01.// 这里原来的业务流程需要外部传进来的两个参数（a，b）来决定如何处理结果 
02.int get_data_v4(int a, int b) 
03.{ 
04.    char bufCmd[]="cmd=1001&uin=123456?m=abc"; 
05.    char bufRcv[4096]; 
06.    send_and_recv(addr, bufCmd, bufRcv); 
07.    use(bufRcv, a, b); 
08.    return 0; 
09.} 
// 这里原来的业务流程需要外部传进来的两个参数（a，b）来决定如何处理结果
int get_data_v4(int a, int b)
{
    char bufCmd[]="cmd=1001&uin=123456?m=abc";
    char bufRcv[4096];
    send_and_recv(addr, bufCmd, bufRcv);
    use(bufRcv, a, b);
    return 0;
}
5 加上参数依赖后再变成异步调用
view plaincopy to clipboardprint?
01.// 需要参数的异步调用需要将参数透传到后半段的回调函数中 
02.void get_data_v5(int a, int b) 
03.{ 
04.    char bufCmd[]="cmd=1001&uin=123456?m=abc"; 
05.    char bufRcv[4096]; 
06.    send_and_recv_async(addr, bufCmd, bufRcv, callback);  } // end of get_data_v5 
07.// definition of call back function 
08.int callback(char* bufRcv, int a, int b) { 
09.    use(bufRcv, a, b); 
10.    return 0; 
11.} 
// 需要参数的异步调用需要将参数透传到后半段的回调函数中
void get_data_v5(int a, int b)
{
    char bufCmd[]="cmd=1001&uin=123456?m=abc";
    char bufRcv[4096];
    send_and_recv_async(addr, bufCmd, bufRcv, callback);  } // end of get_data_v5
// definition of call back function
int callback(char* bufRcv, int a, int b) {
    use(bufRcv, a, b);
    return 0;
}
6 使用一个closure对象打包过程中的参数
view plaincopy to clipboardprint?
01.// 为了统一回调函数的形式并且缩短回调的参数列表，将这种需要透传的参数只有一个 
02.// 统一的数据结构打包 
03.void get_data_v6(int a, int b) 
04.{ 
05.    char bufCmd[]="cmd=1001&uin=123456?m=abc"; 
06.    char bufRcv[4096]; 
07.    send_and_recv(addr, bufCmd, bufRcv, callback);  } // end of get_data_v6 
08.// definition of call back function 
09.int callback(char* bufRcv, struct closure) { 
10.    use(bufRcv, closure.a, closure.b); 
11.    return 0; 
12.} 
// 为了统一回调函数的形式并且缩短回调的参数列表，将这种需要透传的参数只有一个
// 统一的数据结构打包
void get_data_v6(int a, int b)
{
    char bufCmd[]="cmd=1001&uin=123456?m=abc";
    char bufRcv[4096];
    send_and_recv(addr, bufCmd, bufRcv, callback);  } // end of get_data_v6
// definition of call back function
int callback(char* bufRcv, struct closure) {
    use(bufRcv, closure.a, closure.b);
    return 0;
}
7 JS的异步调用
view plaincopy to clipboardprint?
01.// 
02.// 写成JS代码就变成现在这个样子 
03.// url对应之前的addr 
04.// 使用匿名函数代替原来命名的callback定义 
05.// 原生支持闭包closure 
06.// 
07.function get_data_js(a, b) 
08.{ 
09.    var bufCmd = "cmd=1001&uin=123456?m=abc"; 
10.    var bufRcv; 
11.    send_and_recv_with_xhr(/*addr*/url, bufCmd, bufRcv, /*callback/* //);  } // end of get_data_js 
12.        function(bufRcv/*, closure*/) { 
13.            use(bufRcv, /*closure.*/a, /*closure.*/b); 
14.            return 0; 
15.        } 
16.    ); 
17.} 
//
// 写成JS代码就变成现在这个样子
// url对应之前的addr
// 使用匿名函数代替原来命名的callback定义
// 原生支持闭包closure
//
function get_data_js(a, b)
{
    var bufCmd = "cmd=1001&uin=123456?m=abc";
    var bufRcv;
    send_and_recv_with_xhr(/*addr*/url, bufCmd, bufRcv, /*callback/* //);  } // end of get_data_js
        function(bufRcv/*, closure*/) {
            use(bufRcv, /*closure.*/a, /*closure.*/b);
            return 0;
        }
    );
}
总结
1 JS的异步调用的编写，其实和同步编写的过程是一样的。只不过是因为异步调用的时候并不阻塞等待一个网络调用的完成或者事件的发生，所以将原来完整的过程分成了两个割裂的两块。
2 分割成两块以后，本来也没什么问题，不过就是存在后半段处理的过程需要依赖前半段的中间结果或者参数，这些参数很可能是外部传入的。所以为了让这个中间参数的传递变得方便一些，不用为了同样的事情编写代码，于是引入了闭包。最终，闭包的作用是使得代码的后半段和前半段的运行环境完全一致，以使得这种参数传递透明化。由于，当前的流程本来就可能是更大的流程的后半段，所以使得闭包具有了可传递性，也就是闭包变成了闭包链。
所以，最终将异步调用看成是同步调用的上下两段即可，之前设计优美的同步程序的各种方法和经验都可以用于异步调用中。