这篇文章主要介绍了Fetch怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Fetch怎么使用文章都会有所收获,下面我们一起来看看吧。
fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。
ajax
使用步骤
创建XmlHttpRequest对象
调用open方法设置基本请求信息
设置发送的数据,发送请求
注册监听的回调函数
拿到返回值,对页面进行更新
//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(); } } } };
fetch
特点
第一个参数是URL:
第二个是可选参数,可以控制不同配置的 init 对象
使用了 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 的主要区别
fetch()返回的promise将不会拒绝http的错误状态,即使响应是一个HTTP 404或者500
在默认情况下 fetch不会接受或者发送cookies
关于“Fetch怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Fetch怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。