《TypeScript图形渲染实战：2D架构设计与实现》 —2.4.7 实现doGetAsync异步请求方法

2.4.7  实现doGetAsync异步请求方法

　　现在来解决同步请求可能导致的主线程阻塞问题。其实一开始用同步请求的实现，是因为笔者认为同步请求使用方便，不需要编写请求完成后的相关回调代码，不过缺点是如果文件很大的话，会导致主线程堵塞，浏览器失去响应，用户体验很差。

　　什么是异步请求呢？通俗地讲就是开辟一个新的线程来进行文件传输，等传输完成后通知主线程“我已经做完我该做的，轮到你来处理了”，因此异步回调通知是经典的处理模式。

　　下面来实现一个新的、使用异步请求的方法。具体代码如下：

//异步Get请求

    /**

     *

     * @param url { string } 要请求的URL地址

     * @param callback  { ( response : HttpResponse ) => void函数类型 }

     请求成功后的回调函数

     * @param responseType { XMLHttpRequestResponseType } 可以取"text"、

     "json"、"arraybuffer"等

     * @returns { HttpResponse } 自己定义的返回结果的接口

     */

    public static doGetAsync ( url : string , callback : ( response :

    HttpResponse ) => void , responseType : XMLHttpRequestResponseType =

    "text" ) : void {

        let xhr : XMLHttpRequest = new XMLHttpRequest ( ) ;

        // 很关键的一句代码，在doGet同步请求中，不允许设置要请求的资源是文本、JSON

        还是二进制类型的

        // 但是在异步请求中，却可以自己决定请求 text，json，arraybuffer，blob和

        document等类型

        // 大家可以尝试将这句代码粘贴到doGet函数中，然后运行doGet请求

        // 你会发现浏览器会报错

        xhr . responseType = responseType ;

        // onreadystatechange : ( ( this : XMLHttpRequest , ev : Event ) =>

        any ) | null ;

        xhr . onreadystatechange = ( ev : Event ) : void => {

            if ( xhr . readyState === 4 && xhr .status === 200 ) {

                //异步请求成功，返回标记成功的HttpResponse对象，response为请求

                资源数据

                let response : HttpResponse = { success : true , responseType :

                responseType , response : xhr . response } ;

                //并且调用回调函数

                callback( response ) ;

            }

            else {

                //异步请求失败，返回标记失败的HttpResponse对象，response为null

                let response : HttpResponse = { success : false , responseType :

                responseType , response : null } ;

                // 失败也调用回调函数

                callback ( response ) ;

            }

        }

        // open第三个参数用来设置是同步还是异步请求，本函数设置为true，表示异步请求

        xhr . open( "get" , url , true , null , null ) ;

        xhr . send ( ) ;

    }

}

　　doGetAsync与doGet的区别主要有以下两点：

　　（1）异步请求，当请求完成后，不管成功与否，都会调用callback()函数，因此使用方必须要实现完成回调操作函数（或方法），后面Demo中会看到如何使用。

　　（2）可以设置xhr . responseType请求为text、json、arraybuffer和blob等选项。

　　因此可以使用如arraybuffer选项来请求二进制资源，例如经典的quake3 bsp关卡文件。二进制文件的特点就是比文本文件小得多，缺点是我们要明确无误地知道数据是如何存储的，每个数据代表什么含义。

　　在此强调一下，如果在同步请求（doGet）方法中设置xhr . responseType属性，虽然不会报错，但是一旦运行浏览器，就会得到如图2.9所示的错误。

图2.9  同步请求不允许设置response type属性

　　接下来看一下TypeScript中的回调函数（或方法）的相关内容。