简介: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. Visual Studio 打开解决方案后 弹出框显示 "正在打开文件..." 迟迟没反应 的解决方法

    Visual Studio 打开解决方案后 弹出框显示 "正在打开文件...",任务管理器的devenv进程又很正常,不会显示"未响应". 而IDE的左下角有个 ...

  2. MySQL学习笔记(1/2)

    数据库的学习要求:1.为项目设计表:2.使用SQL(Structure Query Language)语句(SQL编程).其他的都可以使用工具完成. SQL: DDL:创建库.创建表 DML:对数据的 ...

  3. OpenGL的学习资源

    OpenGL是3D图形接口工业标准,使用上非常简单,所有API不过上百个函数,但理解OpenGL就没那么简单,本文总结OpenGL的学习资源,包括官方资料.网上教程.示例程序等. Wikipedia: ...

  4. UI自动化测试框架(项目实战)python、Selenium(日志、邮件、pageobject)

    其实百度UI自动化测试框架,会出来很多相关的信息,不过就没有找到纯项目的,无法拿来使用的:所以我最近就写了一个简单,不过可以拿来在真正项目中可以使用的测试框架. 项目的地址:https://githu ...

  5. 【转】Android NFC学习笔记

    一:NFC的tag分发系统 如果想让android设备感应到NFC标签,你要保证两点 1:屏幕没有锁住 2:NFC功能已经在设置中打开 当系统检测到一个NFC标签的时候,他会自动去寻找最合适的acti ...

  6. php array_intersect() 和 array_diff() 函数

    在PHP中,使用 array_intersect 求两个数组的交集比使用 array_diff 求同样两个数组的并集要快. 如果要求数组 $a 与数组 $b 的差集的个数,应该使用 count($a) ...

  7. debuggee python

    my_debugger_defines.py #encoding:utf-8 from ctypes import * from sys import version as py_ver # In p ...

  8. 计算机网络(2)-----ARP协议

    ARP协议(Address Resolution Protocol) 概念 地址解析协议,即ARP(Address Resolution Protocol),是根据IP地址获取物理地址的一个TCP/I ...

  9. java使用httpcomponents post发送json数据

    一.适用场景 当我们向第三方系统提交数据的时候,需要调用第三方系统提供的接口.不同的系统提供的接口也不一样,有的是SOAP Webservice.RESTful Webservice 或其他的.当使用 ...

  10. Revit二次开发示例:EventsMonitor

    在该示例中,插件在Revit启动时弹出事件监控选择界面,供用户设置,也可在添加的Ribbon界面完成设置.当Revit进行相应操作时,弹出窗体会记录事件时间和名称. #region Namespace ...