Fetch API 简单指南

Fetch API 简单指南

什么是 Fetch API

fetch api 是一个基于Promise api设计的 xmlHttpRequest 的升级替代品，用于通过javascript发起异步请求。

目前各个主流浏览器的主要版本都内置了Fetch Api;

浏览器支持列表：

既然说fetch是xhr的替代品，那就不得不来说一下他相对xhr来说有哪些优点：

1. fetch 较于 xhr 来讲，最大的优点在于他是基于Promise的，这样一来你可以方便的进行链式调用，也可以完全利用Promise丰富的api,实现一些复杂的需求。

2. fetch 遵循模块化设计原则和OOB原则。fetch将一个完整的请求需要的功能按照Http请求的模块划分分散到几个主要的接口上：Request, Response, Header,AbortController, 这样一来，使用起来各部分逻辑关注分离，使得代码更加清晰易懂。而xhr则是将所有的集中在一个接口上。

3. fetch采用异步数据流处理响应数据，这样一来，数据可以做到按需加载。同xhr必须将数据放入缓存才能使用相比，能大大提高应用的性能。

4. fetch 同样可以被中止，并且可以被优雅的批量终止。

当然，fetch相比于xhr,也有一个缺点，那就是他不支持进度状态，因此，在一些文件上传下载的业务中，可能不是那么的友好。

开始使用：hello fetch

fetch api本身只是一个函数，因此的他基础用法很简单：

fetch('http://some.url.com/api').then(response => {
    ...
})

fetch函数的第一个参数可以是一个资源Url,此时，如果没有第二个参数，将会发起一个简单的get请求。

返回值是一个提供一个Response实例的Promise.

值得一提的是，只要服务端成功响应了本次请求，无论状态码是多少，Promise的状态都是fullfilled状态，只有当遇到网络错误，或者URL无效或者其他原因服务器根本没有响应时，promise的状态才会是rejected.

关于Response

有必要说一下Response对象常用的的Api:

Response对象时对服务端响应的一个完全封装,response包含一下属性或者方法：

• ok属性: 用来标识请求是否成功响应（http状态码在200-299之间）

• status属性: 响应的状态码

• statusText属性:响应状态信息说明，例如status为200，statusText 为 OK.

• type属性: 标识响应的类型， 常用的值有 cors(跨域请求)，basic(同源请求)， error(网络错误导致的失败的请求)

• url属性: 响应对应的URL

• Response.useFinalURL属性： 包含了一个布尔值，来标示这是否是该 Response 的最终 URL。

• Response.body属性：一个简单的 getter，用于暴露一个 ReadableStream 类型的 body 内容。

• Response.bodyUsed属性：包含了一个