前端发请求用什么

从第一天开始 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