Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Fetch API 之 —— Headers

  在 HTTP 中无论是请求还是响应都有头部分,它就相当于一个请求的配置参数一样。也许大家会觉得 HTTP 头很简单,就只一个 key-value 结构而已。但实际上还有还是有很多讲究的,要不然怎么会有那么厚一本 HTTP 规范呢?所以这个 Headers 也不简单!
  Fetch API 中直接就有 Headers 这个全局构造器,它是封装了 HTTP 请求头的基本操作和限制。其实很多时候请求头确实只要 key-value 结构就够了,然而确实有一些特殊的情况。比如下面这个 data 要怎么处理? var data = [
  {key:"Accept-Encoding",value:"gzip"},
  {key:"Accept-Encoding",value:"deflate"},
  {key:"Accept-Encoding",value:"sdch"},
];
  JavaScript 原生对象的 key-value 肯定是不行的,所以有时候简易的做法无法解决这种问题。当然,这只是个逻辑问题,因为请求真正发送的时候这些同名的头都是合并成一个逗号分隔的数组的。比如上面的头最终在请求中会被表示为 Accept-Encoding: gzip, deflate, sdch   Headers 对象在使用时将这些头分别 append 进去,发起请求时才转换成最终格式。
  另外还有一些零碎的坑 Headers 也会帮我们填好。比如 HTTP 头的名称或值是不支持某些字符的,自己实现通常不会去做这么细的检查;HTTP 头的名称是大小写不敏感的,而 JavaScript 原生对象的 key 是大小写敏感的。类似这样的小坑还有许多,所以对 Headers 的这些封装还是很有意义的。
  我不想扯 Headers 的全套接口方法,这玩意儿看文档比我说得明白。我主要是想说说几个有趣(诡异)的设计。
  Headers 的 prototype 中有 get 和 getAll 这两个方法。我第一次看到以为是获取单个头和获取所有头的数组用的。但翻了文档后才知道,这两个方法都同样接收一个 name 参数。由于一个 name 可以对应多个 value,所以 get 方法获取的是这些 value 中的第一个,而 getAll 方法获取这个 name 对应的所有 value 组成的数组。这诡异的设计理念我暂时无法理解。
  先不纠结这个诡异的设计,既然 getAll 方法不是用于获取所有头的,那么如何获取所有头呢?这里的设计又让我吃了一惊,Headers 居然支持使用 Symbol.iterator 来遍历,这也太先进了吧?目前最新稳定的 Chrome 和 Firefox 都支持了 for-of 语句,所以这个设计是非常赞的。

  总的来说,这个 Headers 的设计还算是比较轻便吧!可能内部的逻辑可能会比较复杂,但这复杂是由更底层的规范引起的,而且也没有太多的暴露在 API 中,这样就已经挺好的了。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^