【前端】fetch和Ajax的区别

一 Ajax

Ajax的本质是使用XMLHttpRequest对象来请求数据，下面简单贴下原生js实现：

function ajax(url, fnSucc, fnFaild)
{
    //1.创建Ajax对象 if(window.XMLHttpRequest){
       var oAjax=new XMLHttpRequest();
    }else{
       var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
    }

    //2.连接服务器（打开和服务器的连接）
    oAjax.open('GET', url, true);

    //3.发送
    oAjax.send();

    //4.接收
    oAjax.onreadystatechange=function (){
       if(oAjax.readyState==4){
           if(oAjax.status==200){
              //alert('成功了：'+oAjax.responseText);
              fnSucc(oAjax.responseText);
           }else{
              //alert('失败了'); if(fnFaild){
                  fnFaild();
              }
           }
        }
    };
}

二 fetch

fetch 是全局量 window 的一个方法，它的主要特点有：

• 第一个参数是URL
• 第二个是可选参数，可以控制不同配置的 init 对象
• 使用了 JavaScript Promises 来处理结果/回调

三 两者区别

• 从 fetch()返回的 Promise 将不会拒绝HTTP错误状态, 即使响应是一个 HTTP 404 或 500。相反，它会正常解决 (其中ok状态设置为false), 并且仅在网络故障时或任何阻止请求完成时，它才会拒绝。
• 默认情况下, fetch在服务端不会发送或接收任何 cookies, 如果站点依赖于维护一个用户会话，则导致未经认证的请求(要发送 cookies，必须发送凭据头)。如果想要在同域中自动发送cookie,加上 credentials 的 same-origin 选项，对于cors请求，使用credentials的include选项允许将凭据发送到其他域。