从第一天开始 Buddy 就给我布置了一个作业，然后每次完成后，需求就会发生变化，从第一次做完后需求已经变了很多次了。而这次变的更大。
他用 mocky 给我 mock 了一个网络请求，然后让我使用异步 action 发请求完成。那么问题来了，前端发请求用什么呢？
可能一开始你会想到 ajax，也可能一开始你会和我一样想到 superagent，然而在这里我要说的是 fetch（继昨天用 superagent 被 Buddy 嘲笑后，只能默默的去学习 fetch 了）。
为什么是 Fetch
XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离的原则，配置和调用方式非常混乱。而且基于事件的异步模型写起来没有现代的 Promise 友好。
Fetch 的出现就是为了解决 XMLHttpRequest 的问题。
例如，使用 superagent 我们发送一个请求一般是这样的：
superagent
.get('http://www.mocky.io/v2/5a01c6a83300005002f6ed66')
.end((err, res) => {
if (err) {
throw err;
} else {
console.log(res.body)
}
})
而使用 Fecth 是这样写的
fetch('http://www.mocky.io/v2/5a01c6a83300005002f6ed66')
.then(response => response.json())
.then(data => console.log('data', data))
.catch(error => console.log('error', error));
由上面的例子可以看出，Fetch 优点有：
- 语法简洁，更加语义化
- 基于标准 Promise 实现，支持 async / await
- 同构方便，使用 isomorphic-fetch（此处 isomorphic-fetch 是一个 polyfill，一般用于 express 作为后端时；而通常用的 Fetch 是 Fetch Api）
对于以上三个优点，其实我有感触的也就第一点，而后面两个可能是见得太少了吧，还是没感觉，毕竟作为前端要紧跟前端更新的速度。
Fetch
fetch(url, {})
其中，第二个参数是可选的，通常以对象的形式，包括：请求类型，请求体，请求头部 等信息。网络请求的返回值是一个 Promise 需经过 JSON 解析，才能拿到真正的响应体。
例子中的 then() 和 catch() 均是 Promise 的方法，具体参见我前几天写的Promise 学习笔记，或者 MDN 中的文档。
兼容性
image.png
Fetch 常见坑
- Fetch 请求默认是不带 cookie 的，需要设置
fetch(url, {credentials: 'include'}) - 服务器返回
400，500错误码时并不会 reject。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false），只有网络错误这些导致请求不能完成时，fetch 才会被 reject
