WEEX H5 Render 解读（8）之stream类续

上节我们阅读了stream类中的两种方法sendhttp和fetch，这节我们继续阅读stream的方法。

---

我们应该注意到<code>_jsonp.apply(this, _callArgs)</code>和<code>_xhr.apply(this, _callArgs)</code>这两个方法。个人建议使用xhr结合cors方法进行跨域，因此这节主要在于分析_xhr的源码。
按照惯例，贴出_xhr的源码

function _xhr (config, callback, progressCallback) {
  const xhr = new XMLHttpRequest()
  xhr.responseType = config.type
  xhr.open(config.method, config.url, true)

  const headers = config.headers || {}
  for (const k in headers) {
    xhr.setRequestHeader(k, headers[k])
  }

  xhr.onload = function (res) {
    callback({
      status: xhr.status,
      ok: xhr.status >= 200 && xhr.status < 300,
      statusText: xhr.statusText,
      data: xhr.response,
      headers: xhr.getAllResponseHeaders().split('\n')
        .reduce(function (obj, headerStr) {
          const headerArr = headerStr.match(/(.+): (.+)/)
          if (headerArr) {
            obj[headerArr[1]] = headerArr[2]
          }
          return obj
        }, {})
    })
  }

  if (progressCallback) {
    xhr.onprogress = function (e) {
      progressCallback({
        readyState: xhr.readyState,
        status: xhr.status,
        length: e.loaded,
        total: e.total,
        statusText: xhr.statusText,
        headers: xhr.getAllResponseHeaders().split('\n')
          .reduce(function (obj, headerStr) {
            const headerArr = headerStr.match(/(.+): (.+)/)
            if (headerArr) {
              obj[headerArr[1]] = headerArr[2]
            }
            return obj
          }, {})
      })
    }
  }

  xhr.onerror = function (err) {
    logger.error('unexpected error in _xhr for \'fetch\' API', err)
    callback({
      status: ERROR_STATE,
      ok: false,
      statusText: '',
      data: '',
      headers: {}
    })
  }

  xhr.send(config.body)
}

• _xhr函数的声明

<code>function _xhr (config, callback, progressCallback) {}</code>和<code>_xhr.apply(this, _callArgs)</code>相对应。XX.apply(,)中，XX是一个函数，apply的第一个参数是指代作用域，第二个参数是XX函数的参数列表。（如果对这种方式不了解可以，查阅js相关文档）

• xhr对象的示例化和设置处理函数
  可以通过下面的代码段看出：

const xhr = new XMLHttpRequest()
xhr.setRequestHeader(k, headers[k])
xhr.onload = function (res) {}
xhr.onprogress = function (e) {}
hr.onerror = function (err) {}
xhr.send(config.body)

这是典型的XmlHttpRequest对象的使用，XmlHttpRequest是前端开发中使用最频繁的一个方法，可以参考百度百科
其中下面的一段代码

headers: xhr.getAllResponseHeaders().split('\n')
          .reduce(function (obj, headerStr) {
            const headerArr = headerStr.match(/(.+): (.+)/)
            if (headerArr) {
              obj[headerArr[1]] = headerArr[2]
            }
            return obj
          }, {})

是用来把字符串的headers变为js对象的的请求头。数组的reduce方法可以实现相近的两个元素调用同一个方法，同时返回新的对象的方法。obj是数组的前一个元素，headerStr是后一个元素。
代码 <code>obj[headerArr[1]] = headerArr[2]</code>之所以从1开始是因为0元素为原字符串(js 正则表达的匹配规则)。

---

stream到此已经分析完毕，下节我们分析sender.js。sender.js的路径为：

。再次感谢阅读，如有错误欢迎提意见啊