XHR對象的進度事件

首先要明確的是對事件的監聽方法是在 on + 事件名，比如load事件，load事件的監聽方法就是onload，也可以使用addEventListener方法，這個方法的參數就是事件名稱（'load'）

言歸正傳，Progress Events規范是W3C的一個草案，定義了與客戶端服務器通信有關的事件。有如下7個進度事件：

1. abort：在因為調用abort()方法而終止連接時觸發。
2. error：在請求發生錯誤時觸發。
3. load： 在接收到完整的響應數據時觸發。
4. loadend： 在通信完成或者觸發error、abort、或load事件后觸發。
5. loadstart：在接收到響應數據的第一個字節時觸發。
6. progress：在接收響應期間持續不斷地觸發。
7. timeout:在規定的時間內瀏覽器還沒有接收到響應時觸發。

　　每個請求都從觸發loadstart事件開始，接下來，通常每隔50毫秒左右觸發一次progress事件，然后觸發load、error、abort或timeout事件中的一個，最后以觸發loadend事件結束。

　　對於任何具體請求，瀏覽器將只會觸發load、abort、timeout和error事件中的一個。XHR2規范草案指出一旦這些事件中的一個發生后，瀏覽器應該觸發loadend事件

對應的監聽方法如下：

    onabort: ((this: XMLHttpRequest, ev: ProgressEvent) => any) | null;
    onerror: ((this: XMLHttpRequest, ev: ProgressEvent) => any) | null;
    onload: ((this: XMLHttpRequest, ev: ProgressEvent) => any) | null;
    onloadend: ((this: XMLHttpRequest, ev: ProgressEvent) => any) | null;
    onloadstart: ((this: XMLHttpRequest, ev: ProgressEvent) => any) | null;
    onprogress: ((this: XMLHttpRequest, ev: ProgressEvent) => any) | null;
    ontimeout: ((this: XMLHttpRequest, ev: ProgressEvent) => any) | null;

　　注意到監聽方法都支持傳遞2個參數，this對象指向當前的XHR實例（當然，這里不能使用箭頭函數），ev是進度事件的實例。ev.target也指向當前XHR實例。

一、load事件

　　load事件在接收到完整的響應數據時觸發。那么就沒有必要監聽readystatechange事件了。並且只有完整的接收到才會觸發，所以也沒有必要檢查readyState屬性了。

　　Angular的http模塊是都XHR對象的再封裝，其中主要的處理響應的邏輯就是放在load事件中。下面是簡化的邏輯：

    this.response = new Observable<Response>((responseObserver: Observer<Response>) => {
      // 創建XHR對象
      const _xhr: XMLHttpRequest = browserXHR.build();
      // 調用open方法准備請求
      _xhr.open(RequestMethod[req.method].toUpperCase(), req.url);

      // 定義load事件
      const onLoad = () => {

        // 下面的一大段代碼是為了提供友好的Response，
        // normalize IE9 bug (http://bugs.jquery.com/ticket/1450)
        let status: number = _xhr.status === 1223 ? 204 : _xhr.status;

        let body: any = null;

        // HTTP 204 means no content
        if (status !== 204) {
          // responseText is the old-school way of retrieving response (supported by IE8 & 9)
          // response/responseType properties were introduced in ResourceLoader Level2 spec
          // (supported by IE10)
          body = (typeof _xhr.response === 'undefined') ? _xhr.responseText : _xhr.response;

          // Implicitly strip a potential XSSI prefix.
          if (typeof body === 'string') {
            body = body.replace(XSSI_PREFIX, '');
          }
        }

        // fix status code when it is 0 (0 status is undocumented).
        // Occurs when accessing file resources or on Android 4.1 stock browser
        // while retrieving files from application cache.
        if (status === 0) {
          status = body ? 200 : 0;
        }

        const headers: Headers = Headers.fromResponseHeaderString(_xhr.getAllResponseHeaders());
        // IE 9 does not provide the way to get URL of response
        const url = getResponseURL(_xhr) || req.url;
        const statusText: string = _xhr.statusText || 'OK';

        let responseOptions = new ResponseOptions({body, status, headers, statusText, url});
        if (baseResponseOptions != null) {
          responseOptions = baseResponseOptions.merge(responseOptions);
        }
        const response = new Response(responseOptions);
        response.ok = isSuccess(status);
        if (response.ok) {
          // 這里把response發送出去
          responseObserver.next(response);
          // TODO(gdi2290): defer complete if array buffer until done
          responseObserver.complete();
          return;
        }
        // 如果發生錯誤了，把錯誤發送出去
        responseObserver.error(response);
      };
      // 定義error事件
      const onError = (err: ErrorEvent) => {
        // 對Error再封裝
        let responseOptions = new ResponseOptions({
          body: err,
          type: ResponseType.Error,
          status: _xhr.status,
          statusText: _xhr.statusText,
        });
        if (baseResponseOptions != null) {
          responseOptions = baseResponseOptions.merge(responseOptions);
        }
        // 把通信的錯誤發送出去
        responseObserver.error(new Response(responseOptions));
      };
      // 設置content-type
      this.setDetectedContentType(req, _xhr);

      // 設置request的Header
      if (req.headers == null) {
        req.headers = new Headers();
      }
      if (!req.headers.has('Accept')) {
        req.headers.append('Accept', 'application/json, text/plain, */*');
      }
      req.headers.forEach((values, name) => _xhr.setRequestHeader(name !, values.join(',')));

      // 設置responseType
      if (req.responseType != null && _xhr.responseType != null) {
        switch (req.responseType) {
          case ResponseContentType.ArrayBuffer:
            _xhr.responseType = 'arraybuffer';
            break;
          case ResponseContentType.Json:
            _xhr.responseType = 'json';
            break;
          case ResponseContentType.Text:
            _xhr.responseType = 'text';
            break;
          case ResponseContentType.Blob:
            _xhr.responseType = 'blob';
            break;
          default:
            throw new Error('The selected responseType is not supported');
        }
      }
      // 添加監聽事件
      _xhr.addEventListener('load', onLoad); // 沒有直接使用xhr.onload
      _xhr.addEventListener('error', onError);

      // 發起請求
      _xhr.send(this.request.getBody());

      // 這是一個Observable，在退訂Observable要對XHR對象進行解引用操作
      return () => {
        _xhr.removeEventListener('load', onLoad);
        _xhr.removeEventListener('error', onError);
        _xhr.abort();
      };
    });

 

可以看到，Angular把XHR對象進行了再封裝，返回的是一個Observable，使用Angular通過的http模塊是不能直接監聽load事件的，可以認為只要Response Observable發送出數據就已經觸發了load事件

二、progress事件

　　progress事件在接收響應期間持續不斷地觸發。這里把progress事件說明一下是因為Angular中通過了一個監聽進度事件的接口，下面我們來看一下實現原理：

 

      // 通過設置參數來開啟進度監聽
      if (req.reportProgress) {
        // 取得數據時一直監聽
        xhr.addEventListener('progress', onDownProgress);

        // 上傳數據時要判斷是否有upload
        if (reqBody !== null && xhr.upload) {
          xhr.upload.addEventListener('progress', onUpProgress);
        }
      }

其中onDownProgress和onUpProgress方法中提供了友好的事件類型，實際上不考慮友好，單純的使用上可以直接發送event出去。

三、其他事件

　　HTTP請求無法完成有3種情況，對應3種事件。

1. 如果請求超時，會觸發timeout事件。
2. 如果請求中止，會觸發abort事件。
3. 最后，像太多重定向這樣的網絡錯誤會阻止請求完成，但這些情況發生時會觸發error事件

　　可以通過調用XMLHttpRequest對象的abort()方法來取消正在進行的HTTP請求。調用abort()方法在這個對象上觸發abort事件

　　調用abort()的主要原因是完成取消或超時請求消耗的時間太長或當響應變得無關時。假如使用XMLHttpRequest為文本輸入域請求自動完成推薦。如果用戶在服務器的建議達到之前輸入了新字符，這時等待請求不再有用，應該中止。

　　XHR對象的timeout屬性等於一個整數，表示多少毫秒后，如果請求仍然沒有得到結果，就會自動終止。該屬性默認等於0，表示沒有時間限制

四：總結

　　Angular的http模塊對XHR對象進行了封裝，使得XHR對象的原生進度事件沒有暴露給開發人員，目前的開發中還沒有遇到需要監聽的情況，不知道以后會怎么樣。

作成： 2019-02-09

修改：

1. 2019-02-10 23:25:02 添加分類
2. 2019-02-16 18:22:15 添加說明

參考：https://www.cnblogs.com/xiaohuochai/p/6552674.html