ajax与fetch的用法

Posted 2020-10-21 huangtonghui

// 传统ajax用法
var xhr = new XMLHttpRequest();
xhr.responseType = ‘json‘;
xhr.timeout = 2000;
console.log(xhr.readyState);//0
xhr.open(‘GET‘, url);
console.log(xhr.readyState);//1
xhr.onloadstart = function (e) {
    xhr.abort();
    console.log(e);
};
xhr.onprogress = function (e) {
    console.log(xhr.readyState);//3
    console.log(e);
};
xhr.onload = function(res) {
    console.log(res);
    console.log(xhr.readyState);//4
};
xhr.onerror = function(err) {
    console.log(err);
};
xhr.ontimeout = function (e) {
    console.log(e);
};
xhr.onabort = function(e){
    console.log(e);
};
xhr.onloaded = function(e){
    console.log(e);
};
xhr.send();

// 传统ajax用法
function req(url, data, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open(‘POST‘, url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var res = JSON.parse(request.responseText);
            callback(res);
        }
    };
    // post
    xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
    xhr.send(data);
    // get
    xhr.setRequestHeader("Content-Type", "text/xml;charset=utf-8");
    xhr.send(null);
}
req(url, data, callback());

// 替代ajax的fetch
fetch(‘/users.json‘, {
    method: ‘POST‘,
    body: data,
    mode: ‘cors‘,
    redirect: ‘follow‘,
    headers: new Headers({
        ‘Content-Type‘: ‘text/plain‘
    })
}).then(function(res) { 
    console.log(res);
}).then(function(res) {
    console.log(res);
}).catch(function (err) {
    console.log(err);
});

// 使用async,await的fetch
async function req(url, data) {
    try {
        let response = await fetch(url, data);
        let data = await response.json();
        console.log(data);
    }
    catch (err) {
        console.log(err);
    }
}
req(‘https://www.baidu.com‘, data);