简介:fetch() 方法用于发起获取资源的请求。它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 Response 对象。

为了更好的体验,可点击这里阅读

XMLHttpRequest的痛

我们使用ajax久矣,最熟悉的莫过于经过jQuery封装的ajax对象,因为简单好用。
经过封装打扮的ajax固然漂亮,可是我们都明白底层是怎么回事。对于主流浏览器是 XMLHttpRequest,对于低版本IE是 ActiveXObject
所以,对于传统ajax使用,我们首先得统一 请求对象:

 function ajaxFunction()
  {
  var xmlHttp;

  try
     {
    // Firefox, Opera 8.0+, Safari
     return xmlHttp=new XMLHttpRequest();
     }
  catch (e)
     {

   // Internet Explorer
    try
       {
       return xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       }
    catch (e)
       {

       try
          {
          return xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
       catch (e)
          {
          alert("您的浏览器不支持AJAX!");
          return false;
          }
       }
     }
  }

然后使用依然隐隐作痛:

 var xhr = ajaxFunction();
 var url = "http://xxxx.xxx/api/xxxx"
 xhr.open('GET', url);
 xhr.responseType = 'json';

 xhr.onload = function() {
   console.log(xhr.response);
 };

 xhr.onerror = function() {
   console.log("Oops, error");
 };

 xhr.send();

诚如是,XMLHttpRequest 的设计确实有点粗糙难用,配置和调用方式非常混乱,而且异步回调,没有Promise对象的模式。

fetch简介

官方解释:

  • fetch() 方法用于发起获取资源的请求。它返回一个 promise,这个 promise 会在请求响应后被 resolve,并传回 Response 对象。

  • Window 和 WorkerGlobalScope 都实现了 GlobalFetch — 这意味着基本在任何场景下只要你想获取资源,都可以使用 fetch() 方法。

  • 当遇到网络错误时,fetch() 返回的 promise 会被 reject,并传回 TypeError,虽然这也可能因为权限或其它问题导致。成功的 fetch() 检查不仅要包括 promise 被 resolve,还要包括 Response.ok 属性为 true。HTTP 404 状态并不被认为是网络错误。

语法:

fetch(input, init).then(function(response) { ... });

参数

    • input
      定义要获取的资源。这可能是:

      • 一个 USVString 字符串,包含要获取资源的 URL。
      • 一个 Request 对象。
    • init 可选
      一个配置项对象,包括所有对请求的设置。可选的参数有:
      • method: 请求使用的方法,如 GET、POST。
      • headers: 请求的头信息,形式为 Headers 对象或 ByteString。
      • body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams * 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
      • mode: 请求的模式,如 cors、 no-cors 或者 same-origin。
      • credentials: 请求的 credentials,如 omit、same-origin 或者 include。
      • cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
    • 返回值
      一个 Promise,resolve 时回传 Response 对象。

兼容性:

fetch基本使用

 var url = "xxxxxx";
 fetch(url).then(function(response) {
     console.log(response)
     if (response.status !== 200) {
         console.log("request " + url + "error! status: " + response.status);
         return;
     }
     return response.json();
 }).then(function(data) {
     console.log(data);
 }).catch(function(e) {
     console.log("error");
 });

如果你有做测试的话,可以看到 console.log(response) 打印出的信息,包含请求状态,请求头,请求体等等。
另外调用 response.json()方法返回依然是一个 Promise对象,所以,可以如下使用:

 response.json().then(function (data){
       // do something
 })

另外还有 第一个参数是 Request对象的使用方法,这里不做阐述。

参考资料

fetch mdn

fetch 资源请求的更多相关文章

  1. 使用nginx-http-concat添加nginx资源请求合并功能

    web项目中有时候一个页面会加载多个js或css资源请求,导致页面加载耗时较长,这时优化的方向可以采用资源合并,可以在客户端事先合并,也可以在服务端进行资源合并,服务端合并的方式使用起来更灵活. ng ...

  2. 使用nginx处理静态资源请求,其余交给node

    由于项目后台使用的是node,然而node不适合对静态资源的处理,因为他的异步处理(事件轮询)机制,所以更擅长的是密集I/O型的应用,所以我就有了一个想法,使用nginx来做反向代理,当请求的是静态资 ...

  3. JSONP、图片Ping、XMLHttpRequest2.0等跨域资源请求(CORS)

    跨域:当协议.主域名.子域名.端口号中任意一个不相同时都不算同一个域,而在不同域之间请求数据即为跨域请求.解决方法有以下几种(如有错误欢迎指出)以请求图片url为例: 1.通过XMLHttpReque ...

  4. 跨域资源请求(除jsonp以外)的方法

    ---------------------------------------------------------------------------------------------------- ...

  5. fetch使用的常见问题及解决办法

    首先声明一下,本文不是要讲解fetch的具体用法,不清楚的可以参考MDN fetch教程. 引言 说道fetch就不得不提XMLHttpRequest了,XHR在发送web请求时需要开发者配置相关请求 ...

  6. fetch()的用法

    发起获取资源请求的我们一般都会用AJAX技术,最近在学习微信小程序的时候,用到了fetch()方法. fetch()方法用于发起获取资源的请求.它返回一个promise,这个promise会在请求响应 ...

  7. fetch知识点汇总

    使用XHR发送一个json请求一般是这样: const xhr = new XMLHttpRequest() xhr.open('Get', url) xhr.responseType = 'json ...

  8. SpringMVC入门案例及请求流程图(关于处理器或视图解析器或处理器映射器等的初步配置)

    SpringMVC简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 Spring结构图 Spr ...

  9. HTTP协议GET和POST请求的区别

    浏览器中输入网址访问资源一般都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交.Http协议定义了与服务器交互的不同方法,最基本的方法有4种, ...

随机推荐

  1. mysql 查询制定日期数据

    //获取昨天更新数据的条件date_sub(current_date(), interval 1 day) = from_unixtime(senddate, '%Y-%m-%d') 注释:date_ ...

  2. Redis的PHP操作手册(转)

    String 类型操作 string是redis最基本的类型,而且string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象 $redis-> ...

  3. 移动端div移动

    <!doctype html> <html lang="en"> <head> <meta http-equiv="Conten ...

  4. ajax请求!

    ajax请求: var data ='{"useName":"'+name+'",}' $.ajax({ type:"post", url: ...

  5. Android SQL语句实现数据库的增删改查

    本文介绍android中的数据库的增删改查 复习sql语法: * 增 insert into info (name,phone) values ('wuyudong','111') * 删 delet ...

  6. 有关数据库行、锁 的几个问题(rowlock)

    行锁的基本说明: SELECT au_lname FROM authors WITH (NOLOCK) 锁定提示                                 描述  HOLDLOC ...

  7. 【8-30】oracle数据库学习

    oracle安装:将两个文件合并 全局用户:achievec 口令:Admin123456 用户:scott 口令:tiger oracle开发工具: sqlplusw 和sqlplus和pl/sql ...

  8. iOS开发:深入理解GCD 第二篇(dispatch_group、dispatch_barrier、基于线程安全的多读单写)

    Dispatch Group在追加到Dispatch Queue中的多个任务处理完毕之后想执行结束处理,这种需求会经常出现.如果只是使用一个Serial Dispatch Queue(串行队列)时,只 ...

  9. 让Win8自动登录免输入密码的小技巧

    按Win+R键,输出“netplwiz”,单击“确定”,弹出“用户帐户”窗口.将第一个画框上的勾选去掉——应用——弹出自动登录输入你的密码——确定——确定完成.重启看看电脑是不是不用输入密码也可以自动 ...

  10. 24个有用的PHP类库分享

    目前,PHP是用于Web开发的最流行的脚本语言.你可以在互联网上随手找到关于PHP大量资料,包括文档.教程.工具等等.PHP不仅是一种功能丰富的语言,它还能帮助开发人员轻松地创建更好的网络环境.为了进 ...