简介: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. MFC&Halcon之实时视频监控

    上一篇实现了在MFC的窗体内显示图片,本篇介绍如何在MFC窗体内实时显示摄像头的影像. 要实现的功能是点击一个“开始”按钮,可以显示影像,再点击“停止”按钮,可以停止显示. 因为实时显示影像需要在一个 ...

  2. 斯考特·杨(Scott Young)快速学习方法

    上午在网上看到了斯考特·杨(Scott Young)的快速学习方法,感觉很受鼓舞. 现在已经读研究生了,可是发现自己自从上大学以来到现在,发现自己的学习方法有很大的问题. 我是个特别喜欢读书的人,在大 ...

  3. NSMutableAttributedString常用代码

    NSTextAttachment *attachment = [[NSTextAttachment alloc] init]; attachment.image = [UIImage imageNam ...

  4. 委托、回调 Lambda表达式书写方式

  5. Python 4 —— 函数与模块

    函数和模块的使用 一.函数 一个例子说明一切. def hello(): print "hello world" def increment(num): num += 1 retu ...

  6. 滑雪 why WA

    滑雪 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 587  Solved: 219 Description 小明喜欢滑雪,因为滑雪的确很刺激,可是为了获 ...

  7. win8内置管理员用户无法激活此应用

    在运行中输入:“gpedit.msc”,就会启动组策略编辑器, 计算机配置 --> Windows设置 --> 安全设置 --> 本地策略 -->  安全选项  ::::  用 ...

  8. C语言常量与指针

    C语言功能强大而丰富,还表现在const与指针的结合使用上,对不同的问题,它提供不同的保护,特别有用的是指向常量的指针 本文地址:http://www.cnblogs.com/archimedes/p ...

  9. Team Foundation Server 2015(Update 1)集成 SharePoint Server 2013

    自TFS 2008开始,TFS就提供了与SharePoint Server的集成功能,通过多年的研发和提升,目前微软已经实现了两个服务器产品之间的完美集成.通过二者之间的集成,TFS服务器大幅提高和扩 ...

  10. selenium如何分别启动IE、firefox、chrome浏览器

    1.火狐浏览器 /* * 初始化火狐浏览器 * */ public static WebDriver initFireFox(WebDriver dr) { String key = "we ...