Fetch 源码解析

最近总是用fetch，而且没什么事情做，就做个源码分析吧。

fetch 源码并不多，只有380多行。其实挺易学的

执行函数

首先，整个代码是包裹在一个自执行函数里面的，颇为意外，我还以为会是分解的多个文件呢。

不过一想也是，整个代码也就没多少，也不是什么大项目，没必要模块化那么清楚了。

所以说在浏览器只要引入文件就可以了。如果用ES6 module引入则只能这样

require('fetch')
// 或者
import 'fetch'

有意思的是整个函数并没有直接引用window，而是这样实现

(function(self) {
    // 代码...
})(typeof self !== 'undefined' ? self : this)

不传入参数的时候自动是this，那么这个this一般都是window。问题在于，这货都自执行了，为什么多此一举？

是个问题。

检测

'use strict'
if (self.fetch) {
    return
}

这里首先定义严格模式，然后检测有没有fetch，有的话就什么都不做了。

两个辅助函数

这两个函数分别是normalizeName, normalizeValue，从名字可以看出，是过滤字符串的。

name的过滤还用了正则，从Error信息来看，是给header过滤用的

Headers

第一个class。我觉得prototype的方式虽然看起来吊吊的，然而有点儿分散了。还是用ES6更加清楚一点。

先罗列一下几个函数。

constructor 接受一个参数，Object或Headers类型。无论哪个类型都是加入到自己属性中。

其他的光看名字就能理解了。

forEach其实还是蛮好玩的。

Headers.prototype.forEach = function(callback, thisArg) {
    Object.getOwnPropertyNames(this.map).forEach(function(name) {
        this.map[name].forEach(function(value) {
            callback.call(thisArg, value, name, this)
        }, this)
    }, this)
}

这里的this有三个，还有个thisArg。可以说还是挺复杂的。经过查资料得知。原来Array.prototype.forEach的第二个参数是指回调函数里的this。其实是绑定了this的

那么，这里的两个this都是被绑定的，不，其实是三个，因为最内层的callback.call(..., this)还是最外层的this，即Headers。

所以才能在调用的时候特别方便。直接用this.append(name, value)。哎，辛苦了。

几个helper

这里又来了几个helper

首先是第一个，这个单词意思是有没有用过这个东西。

看到这里真为自己羞愧，因为太差，命名还是人家老外专业。

然后是几个reader。用Promise了。这几个reader是浏览器内置的。无须担心。

只是Promise的使用导致兼容性其实是个问题。PC端IE全面未实现。chrome 32才实现。移动端更惨一点儿。Android 4.4没实现，IOS7未实现。好在有polyfill

support 还是蛮有意思的。用几个 in 来测试兼容性。

Body

到了Body了。回忆下用法。Body是怎么用的呢？

const form = document.querySelect('#form')
fetch('/url', {
    method: 'post',
    body: new FormData(form)
})

那么来看看如何实现的。首先定义一个类变量来表示body是不是被用过了。

然后定一个_initBody(body)的函数。从名字看出是初始化。

首先的几个if else先判定输入的body是什么鬼，分别给赋值。然后一个大if给设置header，因为不同的body有不同的content-type

然后如果支持blob就执行解析。顺便做两个函数blob, arrayBuffer, 还顺带一个text解析。

否则是文本了，解析一下，通过Promise.resolve来传递数据。同时也创建了个text解析。

如果支持formData就把文本decode了。也创建了个json()方法。

Request

首先做了个methods的数组，就是HTTP的几种方法。

然后定一个helper，用来过滤method

然后到正文了。先列举下它的方法。

这里其实才是整个入口。这里有个棒棒的特性，如果你是重复定义的request，那么它也能解析，什么意思呢

let req = fetch('/url')
fetch(req).then(doSomeThings())

就是这样，它可以复用之前的参数。如果是正常的那么就直接贴到url了。这里的Request.prototype.isPrototypeOf(input)用得精髓啊！

options就是很容易理解了。就是一些参数写进去嘛。做了很多默认值的设置，让用户可以更简单地使用。当然还有容错。

一切就绪就会initBody,前面说过了。

Helpers again

又来了几个helpers。显示解析body的函数，前面有过调用。把body解析出来然后附加到FormData上，再返回出去。实现很漂亮！

function decode(body) {
    var form = new FormData()
    body.trim().split('&').forEach(function(bytes) {
        if (bytes) {
            var split = bytes.split('=')
            var name = split.shift().replace(/\+/g, ' ')
            var value = split.join('=').replace(/\+/g, ' ')
            form.append(decodeURIComponent(name), decodeURIComponent(value))
            }
        })
    return form
}

再看看前面的使用，得知其实text的body也用了formData哦～

headers(xhr)是调用Header class的，从xhr上得到headers，然后给Headers class，最后返回出去。等等看哪里会调用。

这里无头无脑来了个Body.call(Request.prototype)，不知何意。

Response

这里来了个Response。看这个名字也能猜出来了。

在最后一行又一个this._initBody(bodyInit)，纳闷，没定义这个函数啊。那这个this是什么意思。

别急，下面还有一句Body.call(Response.prototype)。哦，终于明白了，原来是调用的Body的this啊！

上面的Request也是调用的Body的this

然后把Headers, Request, Response都绑定到了self(window)上！我总觉得这样并不合适。污染全局变量哎

然后是在self(window)上挂载全局变量，也是主角fetch

整个被包裹在一个大的Promise上。下面就没什么有意思的东西了，都是调用上面写好的函数，一般的xhr发送

最后还特别友情地加了一行

self.fetch.polyfill = true

告诉大家可以检测一下

完.