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区别

 一、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.基于异步模型不友好，形成回调地狱。

 

 二、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.提供了一些并发请求的接口（重要，方便了不少的操做）。

 

 三、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能够。