编者按：除创宇前端与作者博客外，本文还在语雀发布。
编者还要按：作者也在掘金哦，欢迎关注：@GoDotDotDot
Fetch 与 XHR 比较
Fetch 相对 XHR 来说具有简洁、易用、声明式、天生基于 Promise 等特点。XHR 使用方式复杂，接口繁多，最重要的一点个人觉得是它的回调设计，对于实现 try...catch 比较繁琐。
但是 Fetch 也有它的不足，相对于 XHR 来说，目前它具有以下劣势：
- 不能取消（虽然 AbortController 能实现，但是目前兼容性基本不能使用，可以使用 polyfill ）
- 不能获取进度
- 不能设置超时（可以通过简单的封装来模拟实现）
- 兼容性目前比较差（可以使用 polyfill 间接使用 XHR 来优雅降级，这里推荐使用 isomorphic-fetch ）
在了解 Fetch 和 XHR 的一些不同后，还是需要根据自身的业务需求来选择合适的技术，因为技术没有永远的好坏，只有合不合适。
下面章节我们将介绍如何“优雅”的使用 Fetch 以及如何尽量避免掉劣势。
如何使用Fetch
前面了解了这么多基础知识，现在终于到了介绍如何使用 Fetch 了。老规矩，我们先来看下规范定义的接口。
partial interface mixin WindowOrWorkerGlobalScope {
[NewObject] Promise<Response> fetch(RequestInfo input, optional RequestInit init);
};
复制代码规范中定义的接口我们可以对应着 MDN 进行查看，你可以点击这里更直观的看看它的用法。
从规范中我们可以看到 fetch 属于 WindowOrWorkerGlobalScope 的一部分，暴露在 Window 或 WorkerGlobalScope 对象上。所以在浏览器中，你可以直接调用 fetch。
规范中定义了 fetch 返回一个 Promise，它最多可接收两个参数（ input 和 init ）。为了能够对它的使用方法有个更全面的了解，下面来讲一下这两个参数。
input 参数类型为
RequestInfo，我们可以回到前面的Request部分，来回顾一下它的定义。typedef (Request or USVString) RequestInfo;
发现它是一个
Request对象或者是一个字符串，因此你可以传Request实例或者资源地址字符串，这里一般我们推荐使用字符串。init 参数类型为
RequestInit，我们回顾前面Requst部分，它是一个字典类型。在JavaScript中你需要传递一个Object对象。dictionary RequestInit { ByteString method; HeadersInit headers; BodyInit? body; USVString referrer; ReferrerPolicy referrerPolicy; RequestMode mode; RequestCredentials credentials; RequestCache cache; RequestRedirect redirect; DOMString integrity; boolean keepalive; AbortSignal? signal; any window; // can only be set to null };
在本小节之前我们都没有介绍 fetch 的使用方式，但是在其他章节中或多或少出现过它的容貌。现在，我们终于可以在这里正式介绍它的使用方式了。
fetch 它返回一个 Promise，意味着我们可以通过 then 来获取它的返回值，这样我们可以链式调用。如果配合 async/await 使用，我们的代码可读性会更高。下面我们先通过一个简单的示例来熟悉下它的使用。
示例
示例代码位置：github.com/GoDotDotDot…
// 客户端
const headers = new Headers({
'X-Token': 'fe9',
});
setTimeout(() => {
fetch('/data?name=fe', {
method: 'GET', // 默认为 GET，不写也可以
headers,
})
.then(response => response.json())
.then(resData => {
const { status, data } = resData;
if (!status) {
window.alert('发生了一个错误！');
return;
}
document.getElementById('fetch').innerHTML = data;
});
}, 1000);
复制代码上面的示例中，我们自定义了一个 headers 。为了演示方便，这里我们设定了一个定时器。在请求成功时，服务器端会返回相应的数据，我们通过 Response 实例的 json 方法来解析数据。细心的同学会发现，这里 fetch 的第一个参数我们采用的是字符串，在第二个参数我们提供了一些 RequestInit 配置信息，这里我们指定了请求方法（method）和自定义请求头（headers）。当然你也可以传递一个 Request 实例对象，下面我们也给出一个示例。
const headers = new Headers({
'X-Token': 'fe9',
});
const request = new Request('/api/request', {
method: 'GET',
headers,
});
setTimeout(() => {
fetch(request)
.then(res => res.json())
.then(res => {
const { status, data } = res;
if (!status) {
alert('服务器处理失败');
return;
}
document.getElementById('fetch-req').innerHTML = data;
});
}, 1200);
复制代码在浏览器中打开：http://127.0.0.1:4000/， 如果上面的示例运行成功，你将会看到如下界面：
好，在运行完示例后，相信你应该对如何使用 fetch 有个基本的掌握。在上一章节，我们讲过 fetch 有一定的缺点，下面我们针对部分缺点来尝试着处理下。
解决超时
当网络出现异常，请求可能已经超时，为了使我们的程序更健壮，提供一个较好的用户 体验，我们需要提供一个超时机制。然而，fetch 并不支持，这在上一小节中我们也聊到过。庆幸的是，我们有 Promise ，这使得我们有机可趁。我们可以通过自定义封装来达到支持超时机制。下面我们尝试封装下。
const defaultOptions = {
headers: {
'Content-Type': 'application/json',
},
};
function request(url, options = {}) {
return new Promise((resolve, reject) => {
const headers = { ...defaultOptions.headers, ...options.headers };
let abortId;
let timeout = false;
if (options.timeout) {
abortId = setTimeout(() => {
timeout = true;
reject(new Error('timeout!'));
}, options.timeout || 6000);
}
fetch(url, { ...defaultOptions, ...options, headers })
.then((res) => {
if (timeout) throw new Error('timeout!');
return res;
})
.then(checkStatus)
.then(parseJSON)
.then((res) => {
clearTimeout(abortId);
resolve(res);
})
.catch((e) => {
clearTimeout(abortId);
reject(e);
});
});
}
复制代码上面的代码中，我们需要注意下。就是我们手动根据超时时间来 reject 并不会阻止后续的请求，由于我们并没有关闭掉此次连接，属于是伪取消。fetch 中如果后续接受到服务器的响应，依然会继续处理后续的处理。所以这里我们在 fetch 的第一个 then 中进行了超时判断。
取消
const controller = new AbortController();
const signal = controller.signal;
fetch('/data?name=fe', {
method: 'GET',
signal,
})
.then(response => response.json())
.then(resData => {
const { status, data } = resData;
if (!status) {
window.alert('发生了一个错误！');
return;
}
document.getElementById('fetch-str').innerHTML = data;
});
controller.abort();
复制代码我们回过头看下 fetch 的接口，发现有一个属性 signal, 类型为AbortSignal，表示一个信号对象（ signal object ），它允许你通过 AbortController 对象与DOM请求进行通信并在需要时将其中止。你可以通过调用 AbortController.abort 方法完成取消操作。
当我们需要取消时，fetch 会 reject 一个错误（ AbortError DOMException ），中断你的后续处理逻辑。具体可以看规范中的解释。
由于目前 AbortController 兼容性极差，基本不能使用，但是社区有人帮我们提供了 polyfill（这里我不提供链接，因为目前来说还不适合生产使用，会出现下面所述的问题），我们可以通过使用它来帮助我们提前感受新技术带来的快乐。但是你可能会在原生支持 Fetch 但是又不支持 AbortController 的情况下，部分浏览器可能会报如下错误：
- Chrome: “Failed to execute ‘fetch’ on ‘Window’: member signal is not of type AbortSignal.”
- Firefox: “‘signal’ member of RequestInit does not implement interface AbortSignal.”
如果出现以上问题，我们也无能为力，可能原因是浏览器内部做了严格验证，对比发现我们提供的 signal 类型不对。
但是我们可以通过手动 reject 的方式达到取消，但是这种属于伪取消，实际上连接并没有关闭。我们可以通过自定义配置，例如在 options 中增加配置，暴露出 reject，这样我们就可以在外面来取消掉。这里本人暂时不提供代码。有兴趣的同学可以尝试一下，也可以在下面的评论区评论。
前面提到过的获取进度目前我们还无法实现。
拦截器
示例代码位置：github.com/GoDotDotDot…
下面我们讲一讲如何做一个简单的拦截器，这里的拦截器指对响应做拦截。假设我们需要对接口返回的状态码进行解析，例如 403 或者 401 需要跳转到登录页面，200 正常放行，其他报错。由于 fetch 返回一个 Promise ，这就使得我们可以在后续的 then 中做些简单的拦截。我们看一下示例代码：
function parseJSON(response) {
const { status } = response;
if (status === 204 || status === 205) {
return null;
}
return response.json();
}
function checkStatus(response) {
const { status } = response;
if (status >= 200 && status < 300) {
return response;
}
// 权限不允许则跳转到登陆页面
if (status === 403 || status === 401) {
window ? (window.location = '/login.html') : null;
}
const error = new Error(response.statusText);
error.response = response;
throw error;
}
/** * @description 默认配置 * 设置请求头为json */
const defaultOptions = {
headers: {
'Content-Type': 'application/json',
},
// credentials: 'include', // 跨域传递cookie
};
/** * Requests a URL, returning a promise * * @param {string} url The URL we want to request * @param {object} [options] The options we want to pass to "fetch" * * @return {object} The response data */
function request(url, options = {}) {
return new Promise((resolve, reject) => {
const headers = { ...defaultOptions.headers, ...options.headers };
let abortId;
let timeout = false;
if (options.timeout) {
abortId = setTimeout(() => {
timeout = true;
reject(new Error('timeout!'));
}, options.timeout || 6000);
}
fetch(url, { ...defaultOptions, ...options, headers })
.then((res) => {
if (timeout) throw new Error('timeout!');
return res;
})
.then(checkStatus)
.then(parseJSON)
.then((res) => {
clearTimeout(abortId);
resolve(res);
})
.catch((e) => {
clearTimeout(abortId);
reject(e);
});
});
}
复制代码从上面的 checkStatus 代码中我们可以看到，我们首先检查了状态码。当状态码为 403 或 401 时，我们将页面跳转到了 login 登录页面。细心的同学还会发现，我们多了一个处理方法就是 parseJSON，这里由于我们的后端统一返回 json 数据，为了方便，我们就直接统一处理了 json 数据。
总结
本系列文章整体阐述了 fetch 的基本概念、和 XHR 的差异、如何使用 fetch 以及我们常见的解决方案。希望同学们在读完整篇文章能够对 fetch 的认识有所加深。
建议：在整体了解了 fetch 之后，希望同学们能够读一下 github polyfill 源码。在读代码的同时，可以同时参考 Fetch 规范。
参考：
文 / GoDotDotDot
Less is More.
编 / 荧声
作者其他文章：
本文由创宇前端作者授权发布，版权属于作者，创宇前端出品。 欢迎注明出处转载本文。文章链接：blog.godotdotdot.com/2018/12/28/…
想要订阅更多来自知道创宇开发一线的分享，请搜索关注我们的微信公众号：创宇前端（KnownsecFED）。欢迎留言讨论，我们会尽可能回复。
感谢您的阅读。
新年快乐 :）
