fetch的用法ajax,ajax与fetch的用法
// 传统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);