码迷,mamicode.com
首页 > 其他好文 > 详细

Fetch

时间:2020-07-10 15:39:23      阅读:66      评论:0      收藏:0      [点我收藏+]

标签:eof   promise   active   错误   xmlhttp   更新   状态   option   content   

etch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。

ajax

  • 使用步骤
    1.创建XmlHttpRequest对象
    2.调用open方法设置基本请求信息
    3.设置发送的数据,发送请求
    4.注册监听的回调函数
    5.拿到返回值,对页面进行更新
  • //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

  • 特点
    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封装

 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
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

Fetch

标签:eof   promise   active   错误   xmlhttp   更新   状态   option   content   

原文地址:https://www.cnblogs.com/wangze0608/p/13279110.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!