网站搭建关键词排名,鲅鱼圈做网站网工资页多少钱一个月,wordpress 媒体模版,wordpress区块更新失败fetch是一种HTTP数据请求的方式#xff0c;是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装#xff0c;而是原生js。Fetch函数就是原生js#xff0c;没有使用XMLHttpRequest对象。 ajax 使用步骤1.创建XmlHttpRequest对象2.调用open方法设置基本请求信息3.设置发… fetch是一种HTTP数据请求的方式是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装而是原生js。Fetch函数就是原生js没有使用XMLHttpRequest对象。 ajax 使用步骤1.创建XmlHttpRequest对象2.调用open方法设置基本请求信息3.设置发送的数据发送请求4.注册监听的回调函数5.拿到返回值对页面进行更新 //1.创建Ajax对象if(window.XMLHttpRequest){var oAjaxnew XMLHttpRequest(); }else{ var oAjaxnew ActiveXObject(Microsoft.XMLHTTP); } //2.连接服务器打开和服务器的连接 oAjax.open(GET, url, true); //3.发送 oAjax.send(); //4.接收 oAjax.onreadystatechangefunction (){ if(oAjax.readyState4){ if(oAjax.status200){ //alert(成功了oAjax.responseText); fnSucc(oAjax.responseText); }else{ //alert(失败了); if(fnFaild){ fnFaild(); } } } }; fetch 特点1、第一个参数是URL:2、第二个是可选参数可以控制不同配置的 init 对象3、使用了 JavaScript Promises 来处理结果/回调: fetch(url).then(response response.json()).then(data console.log(data)) .catch(e console.log(Oops, error, e)) 更酷的一点你可以通过Request构造器函数创建一个新的请求对象你还可以基于原有的对象创建一个新的对象。 新的请求和旧的并没有什么不同但你可以通过稍微调整配置对象将其用于不同的场景。例如 var req new Request(URL, {method: GET, cache: reload}); fetch(req).then(function(response) { return response.json(); }).then(function(json) { insertPhotos(json); });上面的代码中我们指明了请求使用的方法为GET并且指定不缓存响应的结果你可以基于原有的GET请求创建一个POST请求它们具有相同的请求源。代码如下 // 基于req对象创建新的postReq对象
var postReq new Request(req, {method: POST}); fetch和ajax 的主要区别 1、fetch()返回的promise将不会拒绝http的错误状态即使响应是一个HTTP 404或者500 2、在默认情况下 fetch不会接受或者发送cookies fetch的配置 Promise fetch(String url [, Object options]); Promise fetch(Request req [, Object options]); fetch和ajax 的主要区别 1、fetch()返回的promise将不会拒绝http的错误状态即使响应是一个HTTP 404或者5002、在默认情况下 fetch不会接受或者发送cookies fetch的配置 Promise fetch(String url [, Object options]);Promise fetch(Request req [, Object options]); fetch封装 export default async(url , data {}, type GET, method fetch) { type type.toUpperCase(); url baseUrl url; if (type GET) { let dataStr ; //数据拼接字符串 Object.keys(data).forEach(key { dataStr key data[key] ; }) if (dataStr ! ) { dataStr dataStr.substr(0, dataStr.lastIndexOf()); url url ? dataStr; } } if (window.fetch method fetch) { let requestConfig { credentials: include,//为了在当前域名内自动发送 cookie 必须提供这个选项 method: type, headers: { Accept: application/json, Content-Type: application/json }, mode: cors,//请求的模式 cache: force-cache } if (type POST) { Object.defineProperty(requestConfig, body, { value: JSON.stringify(data) }) } try { const response await fetch(url, requestConfig); const responseJson await response.json(); return responseJson } catch (error) { throw new Error(error) } } else { return new Promise((resolve, reject) { let requestObj; if (window.XMLHttpRequest) { requestObj new XMLHttpRequest(); } else { requestObj new ActiveXObject; } let sendData ; if (type POST) { sendData JSON.stringify(data); } requestObj.open(type, url, true); requestObj.setRequestHeader(Content-type, application/x-www-form-urlencoded); requestObj.send(sendData); requestObj.onreadystatechange () { if (requestObj.readyState 4) { if (requestObj.status 200) { let obj requestObj.response if (typeof obj ! object) { obj JSON.parse(obj); } resolve(obj) } else { reject(requestObj) } } } }) } } 作者anna_0707链接https://www.jianshu.com/p/7762515f8d1a来源简书简书著作权归作者所有任何形式的转载都请联系作者获得授权并注明出处。 转载于:https://www.cnblogs.com/yearshar/p/11493079.html
