dicomweb中的_httpRequest方法

dicomweb中的_httpRequest方法

dicom-client是一个模块，模块通过export暴露了三个可调用的对象api，utils，version
源码：

export { api, utils, version };

其中api对象是模块的核心，api对象只有一个属性DICOMwebClient，属性值是DICOMwebClient函数。
源码：

var api = {
  DICOMwebClient: DICOMwebClient
};

函数通过_createClass创建了许多的方法，有一个非常基础且核心的方法是_httpRequest方法，这是一个用于请求url的方法。
源码：

 value: function _httpRequest(url, method) {
      var _this = this;

      var headers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
      var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
      var errorInterceptor = this.errorInterceptor,
          requestHooks = this.requestHooks;
      return new Promise(function (resolve, reject) {
        var request = new XMLHttpRequest();
        request.open(method, url, true);

        if ("responseType" in options) {
          request.responseType = options.responseType;
        }

        if (_typeof(headers) === "object") {
          //这里_typeof函数的作用是判断headers的数据类型，如果是可遍历对象则会调用forEach里边的函数，作用是给请求加请求头
          Object.keys(headers).forEach(function (key) {
            request.setRequestHeader(key, headers[key]);
          });
        }

        var userHeaders = _this.headers;
        Object.keys(userHeaders).forEach(function (key) {
          request.setRequestHeader(key, userHeaders[key]);
        }); 

        request.onreadystatechange = function () {
          if (request.readyState === 4) {
            if (request.status === 200) {
              resolve(request.response);
            } else if (request.status === 202) {
              if (_this.verbose) {
                console.warn("some resources already existed: ", request);
              }

              resolve(request.response);
            } else if (request.status === 204) {
              if (_this.verbose) {
                console.warn("empty response for request: ", request);
              }

              resolve([]);
            } else {
              var error = new Error("request failed");
              error.request = request;
              error.response = request.response;
              error.status = request.status;

              if (_this.verbose) {
                console.error("request failed: ", request);
                console.error(error);
                console.error(error.response);
              }

              errorInterceptor(error);
              reject(error);
            }
          }
        }; // Event triggered while download progresses
        。。。。。。

        if ("data" in options) {
          request.send(options.data);
        } else {
          //执行这里边的代码
          request.send();
        }
      });
    }

注意
源码里有两个方法onloadstart和onloadend是作者预留的XHR对象LOADING状态自动调用的方法，里边是空函数，这里删去了。

_httpRequest输入两个字符串，第一个字符串是要请求的url，第二个字符串是请求方法（比如’GET’，’POST’等）。返回一个Promise对象，Promise对象里直接使用XMLHttpRequest构造函数来请求url。

可以看到，在request.onreadystatechange部分里边的代码用于控制输出响应，根据网络状态的不同有如下几种情况：

• 如果请求状态为200，则返回resolve状态，输出请求响应、
• 如果请求状态为202，会报警告且返回resolve，并且输出请求响应，
• 如果请求状态为204，会报警告且返回一个输出空数组的resolve
• 如果是其他网络状态则直接抛出错误，生成错误报告并返回reject。

中间部分的一些代码可以先忽略，这是一些用于特殊配置以解决网络请求问题（如跨域问题）的代码，有机会再写，函数结尾返回request.send方法，是一个比较标准的XHR应用流程

这个函数的使用方法也非常简单，调用的时候只需要传入url和method，注意，该方法返回值是一个Promise对象，所以接收返回值需要用到then。
代码：

 import {api} from 'dicomweb-client'
 const url = 'https://localhost'
    const client = new api.DICOMwebClient({url});
    client._httpRequest( 'https://localhost/studies', 'GET').then(studies => {
        console.log(studies)
    })

这里DICOMwebClient传入的的url是DICOMwebClient的options，options必须包含url属性，并且url可以成功访问，这个参数在其他的方法里会用到，不传入会报错。在_classCallCheck里有代码会用来判断url是否存在。
源码：

    this.baseURL = options.url;
    if (!this.baseURL) {
      console.error("no DICOMweb base url provided - calls will fail");
    }

在浏览器输出是一个列表：