深入浅出现代 JavaScript—fetch

「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」

什么是 fetch API？ fetch 是 xml HTTP 请求的替代品，是为渐进式 webapp 而生。有了 fetch API 中封装大部分的代码，处理重定向和错误代码，并对结果进行解码。像大多数新的 API一样，fetch 也返回一个 promise 。

fetch API 是一个比使用事件监听器更优雅简洁的接口，而且还简化了错误处理。fetch 可以和 service workers 一起使用，也可以单独使用，fetch 支持跨源资源共享，也就是 CORS。

fetch('https://example/')
  .then((response) => response.json())
  .then(data => console.log(data))
  .catch((error) => console.log(error));

fetch 返回一个 promise。这也会返回一个 promise，我们用它来等待解码器的完成。最后的 catch 拦截任何出现的错误。这是使 fetch 如此受欢迎的原因之一，接下来再聊一聊一下错误处理的问题。

fetch('https://post/1')
    .then(function(response){
        if(!response.ok){
            throw response.statusText
        }
    })

默认情况下，如果服务器返回一个错误，fetch 不会抛出一个异常，而是返回一个正常的响应。如果服务器返回 200，response.ok 属性将为 true，否则为 false。可以随时查看 response.status 的实际代码。

在这个例子中，如果找不到文件，我们就会抛出一个异常。应该养成尽早检查 response.ok 的习惯。现在，要谈谈跨源资源共享。让我们先来看看所解决的问题。假设的页面是地址是 foo.com ，视图从在 foo.com 页面试图从 example.com 获取一些资源。

将会发生什么？浏览器对去域外获取资源有严格的规定，所以你可能会得到一个错误。这不是fetch的错。同样的事情也会发生在 XML HTTP 请求中。大多数开发者采用黑客手段来解决这个问题，使用 JSONP 或动态 HTML 来加载内容。但有一种更好的、标准化的方法，叫做 CORS。CORS是Cross-Origin Resource Sharing的缩写， 通过 fetch 能够从应用程序的本地之外检索资源。