fetch与ajax

fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装，而是原生js。Fetch函数就是原生js，没有使用XMLHttpRequest对象。

ajax 使用步骤

   //1.创建XmlHttpRequest对象
   var xhr=new XMLHttpRequest()

   //2.调用open方法设置基本请求信息
   xhr.open('get','/some/url',true)

   //3.设置发送的数据，发送请求
   xhr.responseType = 'json';
   xhr.send()

   //4.监听返回值，对页面进行更新
   xhr.onreadystatechange=function(){
       if(xhr.status=200&&xhr.readyState==4){
           console.log(xhr.response)
       }
   }

fetch

fetch()方法与XMLHttpRequest类似，fetch也可以发起http请求，但是与XMLHttpRequest不同的是，fetch方式使用Promise，相比较XMLHttpRequest更加的简洁。
如果你还不了解Promise，需要先补充一些关于Promise的知识。

Promise

Promise是进行异步操作的一种解决方案，比传统的处理方法(回调函数/处理事件)更加合理，可以有效的避免回调地狱的产生,ES6将其写入了语言标准,统一了语法，原生提供了Promise。 Promise可以想象成一个处理异步函数的容器,处理完成之后他会将处理的结果返回出来,我们可以获取他返回出来的数据来进行后面的操作。

使用方法

在ES6中规定,Promise对象是一个构造函数,用来生成Promise实例。

const promist = new Promise(function(resolve,reject){
    if(/*异步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})

resolve在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
reject在异步操作失败时调用，并将异步操作错误结果，作为参数传递出去
Promise实例生成后可以用then()方法操作成功/失败的回调函数

promise.then(function(value){

},function(error){

})
// 亦可用 .catch 来捕获失败/错误

基本的fetch请求

简单的了解了Promise后我们就可以对fetch()方法有一个很好的认识了，fetch是全局量window的一个方法，第一个参数为URL。

// url (必须), options (可选)
fetch('/some/url', {
    method: 'get'
}).then(function(response) {

}).catch(function(err) {
    // 出错了;等价于 then 的第二个回调函数/参数2,但这样更直观
});

url参数是必须要填写的，option可选，设置fetch调用时的Request对象，如method、headers等
比较常用的Request对象有：

method - 支持 GET, POST, PUT, DELETE, HEAD
url - 请求的 URL
headers - 对应的 Headers 对象
body - 请求参数（JSON.stringify 过的字符串或’name=jim\u0026age=22’ 格式)

如提交JSON示例如下：

fetch('/users.json', {
    method: 'POST', 
    body: JSON.stringify({
        email: '[email protected]'
        name: 'jim'
    })

}).then(function() { /* 处理响应 */ });

Response响应

fetch方法的then会接收一个Response实例，值得注意的是fetch方法的第二个then接收的才是后台传过来的真正的数据，一般第一个then对数据进行处理等。

例如fetch处理JSON响应时回调函数有一个json()方法，可以将原始数据转换为json对象

fetch('/some/url', { method: 'get', })
    // 第一个then  设置请求的格式
        .then(e => e.json())
        // 第二个then 处理回调
        .then((data) => {
         
    }).catch(e => console.log("Oops, error", e))

使用fetch请求发送cookie

fetch(url,{
credentials:"include"
})

fetch和ajax 的主要区别

当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
fetch()可以接受跨域 cookies 你也可以使用 fetch() 建立起跨域会话。
fetch 默认不会发送 cookies。除非你使用了credentials 的初始化选项。（自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改）

检测fetch请求是否成功

如果遇到网络故障，fetch() promise 将会 reject，带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true。类似以下代码：

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    return response.blob();
  }
  throw new Error('Network response was not ok.');
}).then(function(myBlob) { 
  var objectURL = URL.createObjectURL(myBlob); 
  myImage.src = objectURL; 
}).catch(function(error) {
  console.log('There has been a problem with your fetch operation: ', error.message);
});