异步请求fetch之初体验

更好阅读体验可移步个人博客：Blog

导读

传递信息到服务器，从服务器获取信息，是前端发展的重中之重，尤为是如今先后端分离的大前提下，先后端的数据交互是前端的必修科目了。从好久以前到如今，ajax都是每一个前端入行者必须技能。固然为了便于开发者， 各类三方工具将ajax包装，而后给开发者使用，jquery、axios等等。这都不是今天的重点， 今天要说一个JavaScript原生的获取资源接口 Fetch API， 虽然各大浏览器支持率不高，可是这样的一个概念确实值得了解学习，而且如今咱们能够经过polyfill来实现不一样浏览器的兼容性问题

Fetch

先来看看各个浏览器对fetch的原生支持状况，能够看到支持性并非很高，safari在10.1 以后才支持，ios更是10.3以后才支持，IE彻底不支持。固然新技术的发展总会经历这个过程。不过，想提早尝尝鲜也是能够的咱们可使用 polyfill

声明：如下的全部代码测试都是基于 Chrome 实现

废话很少说，

fetch 返回的是一个Promise，咱们先来看一个基本的 fetch 结构

fetch(url, option).then( res => {
    //do something
}).catch(err => {
    //do something
})

fetch 的url 参数是必须的，option参数可选
以上就是整个的请求以及处理过程， 惊不惊喜，意不意外，没错就是这么简单清晰明了，没有原生ajax的那些 XMLHttpRequest bulabula 一大堆。也不须要再额外引入一个jquery包（固然项目中使用到的话除外）。固然由于fetch的返回值是一个Promise， 不须要再去使用回调函数从而有效避免回调地狱。

固然，fetch不止于此，咱们的需求也不止于此，咱们可能须要post请求，可能须要跨域请求，控制从服务器获取的信息的格式（json、string、blob等），此时，便须要设置参数信息，对返回信息进行处理。

option

来看看fetch的可选参数option的可选值，fetch默认是get方法，也能够在option中设置为其余方法

• method：get | post 等方法
• headers：任何你想加到请求中的头，能够是对象字面量的方式也能够是经过 Headers
• body：发送给服务器的信息， 能够是JSON, ufferSource, FormData, URLSearchParams, 或 USVString。注意get和HEAD请求没有body
• mode：请求模式， 可选值为 cors, no-cors, same-origin, 或 navigate，cors-with-forced-preflight。默认值应该为 cors。但在Chrome中，Chrome 47 以前的版本默认值为 no-cors ，自Chrome 47起，默认值为same-origin。--MDN Request
• credentials：在请求中是否须要凭据。在请求数据中根据是否须要携带Cookie 来设置其值，可选值为omit（在请求中不懈怠认证凭据（Cookie））, same-origin（在同原站点下包含凭据）, 或 include（对全部网站包含认证凭据）
• cache：如何处理缓存，可取值有 default | no-store | no-cache | reload | force-cache | only-if-cached
• redirect：对重定向的处理，可取值 follow, error, redirect
• referrer：一个指定了no-referrer, client, 或一个 URL的 USVString 。默认值是client.
• integrity: 包括请求的 subresource integrity 值 (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=).

mode

mode 参数便于 CORS， 设置不一样的值可使在不一样的请求方式下，使得请求有效。

• cors：在同域和带有CORS响应头的跨域下能够请求成功
• no-cors：经常使用于在跨域不带CORS场景下， 此时请求发出而且会有响应，可是此时type为“opaque”， status为0 ，js获取不到返回数据。
• same-origin：在同域下请求
• cors-with-forced-preflight：在请求前进行preflight 检查

fetch("https://api.github.com/users/mzabriskie", {mode: "no-cors"}).then(response => {
    return response;
}).then(function(data) {
    console.log(data);
}).catch(function(e) {
    console.log("Oops, error");
});

执行以上代码返回

fetch("https://api.github.com/users/mzabriskie", {mode: "cors"}).then(response => {
    return response;
}).then(function(data) {
    console.log(data);
}).catch(function(e) {
    console.log("Oops, error");
});

以上代码返回

headers

该参数的值能够为对象字面量

headers： {
    "Content-Type": "application/json"
}

也能够建立 Headers 对象，经过append() 和delete() 等方法对其进行操做，

var headers = new Headers();
headers.append( "Content-Type", "application/json");
fetch(url, {
    method: post,
    headers: headers,
    body: {
        name: "jack"
    }
})

Request

Fetch 提供了对 Request 和 Response （以及其余与网络请求有关的）对象的通用定义。因此在一个Fetch请求中，彻底能够只使用Request 和 Response两个对象，经过Request 设置参数，经过Response 对返回值进行处理。
一个Fetch还能够写成如下形式

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'image/jpeg');

var option = { method: 'GET',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default' };

var myRequest = new Request('https://api.github.com/users/mzabriskie',option);

fetch(myRequest).then(function(response) {
    ... 
});

参数设置如 option 下介绍

Response

Fetch API 的Response接口呈现了对一次请求的响应数据

其包含一次请求的响应信息，响应状态等。
包含的一些经常使用属性（只读）

• url：包含请求地址url
• status：响应状态码（200成功）
• ok：一个布尔值标识请求成功或失败
• statusText：包含与状态码对应的状态信息
• headers：包含于请求关联的Headers对象

方法

• clone()： 建立Response对象的克隆

Response可使用如下方法，对响应数据进行处理

arrayBuffer()、blob()、formData()、json()、text()等
如下为使用json() 方法返回的数据信息

fetch("https://api.github.com/users/mzabriskie", {mode: "no-cors"}).then(response => {
    return response.json();
}).then(function(data) {
    console.log(data);
}).catch(function(e) {
    console.log("Oops, error");
});

检测请求是否成功

同XMLHttpResponse同样，请求发出，服务器发出返回码，除了407之外，其不会进入错误捕捉。也就是说除了网络故障或者跨域请求被拒绝等请求失败的状况，fetch() 的Promise是不会 reject的，因此为了请求能按照咱们的预期实现，咱们必须加一个判断，判断请求是否成功并返回了咱们想要的数据。咱们固然能够像 XMLHttpResponse 同样对响应的状态码进行判断，不过咱们还有选择，对response.ok 这个布尔值入手。
细心的同窗可能从以前的截图中看到，在请求成功和失败的状况下，属性 ok 的值 分别为true 和false 这里就不赘余天价截图了，上代码

fetch("https://api.github.com/users/mzabriskie", {mode: "cors"}).then(response => {
    if(response.ok) {
        response.json().then(data => {
            console.log(data);
        });
    } else {
        console.log("请求不成功，状态码为", response.status);
    }
}).catch(function(e) {
    console.log("Oops, error");
});

致此， 一个 fetch 的简单请求便完成了，可是fetch功能远不止这些

fetch 与 ES7的async/await 搭配使用等等，路很长一步一脚印

参考连接

Fetch API - Web API 接口 | MDN
Request - Web API 接口 | MDN
Headers - Web API 接口 | MDN
Response - Web API 接口 | MDN
Body - Web APIs | MDN