Fetch API 了解及对比ajax、axois

Fetch是什么

Fetch 是一个现代的概念, 等同于 XMLHttpRequest。它提供了许多与XMLHttpRequest相同的功能，但被设计成更具可扩展性和高效性。Fetch被很多浏览器所支持(兼容列表)。

Fetch 提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义。

Fetch 还利用到了请求的异步特性——它是基于 Promise 的。

用法

fetch方法接受一个表示url的字符串或者一个Request对象作为参数，第二个参数可选，包含配置信息。

返回值为Promise对象。

请求成功后将结果封装为Response对象，Response对象上具有json, text等方法。

//基本用法示例

fetch(url).then(function(response) {

    return response.json();

}).then(function(data) {

    console.log(data);

}).catch(function(e){

    console.log('error');

});

Request配置项包括

method（请求方法）：如GET、POST

headers（请求头信息）application/x-www-form-urlencodeed， multipart/form-data， application/json， text/xml

body（需要发送的信息）：注意GET或HEAD方法的请求不能包含body信息

mode（请求的模式）：如cors、no-cors或same-origin

credentials（自动发送当前域内cookie）：如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie ，必须提供这个选项

cache（请求的catch模式）：如default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached

redirect（重定向模式）：可自动(follow)或手动(manual)重定向

var myHeaders = new Headers();

myHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

var myInit = {

    method: 'POST',

    credentials : 'include',//携带cookie请求

    //headers: {"Content-Type": "application/x-www-form-urlencoded"},

    headers : myHeaders,

    body:'para1=0&para2=2',

    mode: 'cors',

    cache: 'default'

};

var myRequest = new Request(url,myInit);

fetch(myRequest)

.then(res => {

    return res.json()

})

.then(data => {

    console.log(data)

})

与ajax、axios区别

1、JQuery.ajax()

$.ajax({

   type: 'POST',

   url: url,

   data: data,

   dataType: dataType,

   success: function () {},

   error: function () {}

});

传统 Ajax 指的是 XMLHttpRequest（XHR），最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现回调地狱。

JQuery ajax 是对原生XHR的封装，除此以外还增添了对JSONP的支持。优点无需多言，这里指出几个缺点：

1.JQuery项目很大，若是单纯使用ajax却要引入整个项目。定制化(链接)方案不支持CDN服务。

2.基于异步模型不友好，造成回调地狱。

2、axios

axios({

    method: 'post',

    url: '/user/12345',

    data: {

        firstName: 'Fred',

        lastName: 'Flintstone'

    }

})

.then(function (response) {

    console.log(response);

})

.catch(function (error) {

    console.log(error);

});

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

在网上未找到缺点，大致优点如下

1.从 node.js 创建 http 请求。

2.支持 Promise API。

3.客户端支持防止CSRF(就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。)。

4.提供了一些并发请求的接口（重要，方便了很多的操作）。

3、fetch

try {

  let response = await fetch(url);

  let data = response.json();

  console.log(data);

} catch(e) {

  console.log("Oops, error", e);

}

fetch号称ajax替代品，使用了ES6中的Promise对象。

优点如下：

1.语法简洁

2.基于标准 Promise 实现，支持 async/await

缺点如下：

1.fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理。

2.fetch默认不会带cookie，需要添加配置项。

3.fetch不支持abort（正在支持中），不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费。

4.fetch没有办法原生监测请求的进度，而XHR可以。