fetch和ajax

fetch

1 fetch是基于promise实现的，用的时候可以结合async/await；
2 fetch请求默认是不带cookie的，需要设置fetch（URL，{credentials:’include’})，Credentials有三种参数：same-origin，include，omit：

same-origin：同域名会自动发送cookie，same-origin值使得fetch处理Cookie与XMLHttpRequest类似。否则，Cookie将不会被发送；

include：对于CORS请求，使用include值允许将凭据发送到其他域；

omit：默认不发送cookie；

3 服务器返回400 500 状态码时并不会reject，只有网络出错导致请求不能完成时，fetch才会被reject；
4 所有版本的 IE 均不支持原生 Fetch；
5 fetch是widow的一个方法；

fetch(url, {
    method: 'GET',
    body: formData,  // 请求体
    credentials: 'include', // 解决跨域问题
    headers: {
        Accept: 'application/json, text/plain'
    }
}).then(res => {
    if (res.status === 200) {   // 400 500等状态码也会成功，所以需要处理一下
        return res.json();
    } else {
        reject && reject(res);
        warn('系统繁忙,请稍后再试!');
    };
}).then(res => {
    resolve(res);
}).catch((err) => {
    reject && reject(err);
    warn('系统繁忙,请稍后再试!');
});

ajax

1 是XMLHTTPRequest的一个实例，是原生js里的；
2 只有当状态为200或者304时才会请求成功；
3 容易产生回调地狱；

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();
              }
           }
        }
    };
}

什么是回调地狱?

假如我们有很多异步事件，而这些异步事件又有很紧密的联系，比如一个异步事件要依赖另一个异步事件的返回值，看下面的：

 $.ajax({
    url: '',
    data: {},
    type: 'post',
    dataType: JSON,
    success: function (res) {
        $.ajax({
            url: '',
            data: res.data,
            type: 'post',
            dataType: JSON,
            success: function (res1) {
                $.ajax({
                    url: '',
                    data: res1.data,
                    type: 'post',
                    dataType: JSON,
                    success: function (res2) {
                        $.ajax({
                            url: '',
                            data: res2.data,
                            type: 'post',
                            dataType: JSON,
                            success: function (res3) {
                                console.log(res3)
                            }
                        })
                    }
                })
            }
        })
    }
})

是不是进入了一环套一环的地狱里面。我们可以用promise处理下：

const ajax1 = new Promise(function (resolve,reject) {
    $.ajax({
        url: '',
        data: {},
        type: 'post',
        dataType: JSON,
        success: function (res) {
            resolve(res.data)
        }
    })
})
function ajax2 (data) {
    return new Promise(function (resolve,reject) {
        $.ajax({
            url: '',
            data: data,
            type: 'post',
            dataType: JSON,
            success: function (res) {
                resolve(res.data)
            }
        })
    })
}
function ajax3 (data) {
    return new Promise(function (resolve,reject) {
        $.ajax({
            url: '',
            data: data,
            type: 'post',
            dataType: JSON,
            success: function (res) {
                resolve(res.data)
            }
        })
    })
}
ajax1.then(function (data) {
    return ajax2(data)
}).then(function (data) {
    return ajax3(data)
})

原文：http://www.zhangqinblog.com/learnShare_View/22.html