ajax与fetch的用法

// 传统ajax用法var xhr = new XMLHttpRequest();xhr.responseType = ‘json‘;xhr.timeout = 2000;console.log(xhr.readyState);//0xhr.open(‘GET‘, url);console.log(xhr.readyState);//1xhr.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的fetchfetch(‘/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的fetchasync 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);