简介: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. 004. 前端跨域资源请求: JSONP/CORS/反向代理

    1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...

  4. webpack4+node合并资源请求, 实现combo功能(二十三)

    本文学习使用nodejs实现css或js资源文件的合并请求功能,我们都知道在一个复杂的项目当中,可能会使用到很多第三方插件,虽然目前使用vue开发系统或者h5页面,vue组件够用,但是有的项目中会使用 ...

  5. 解决React Native使用Fetch API请求网络报Network request failed

    问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...

  6. Unity下的开发框架--适应web和微端游戏异步资源请求的框架

    一.   内容简介: 1.   框架对Web与微端游戏特性的支持: Web和微端游戏最重要的特性是,资源是持续从服务器上即时下载下来的.而保证体验流畅的关键就是保证资源下载分散到持续的体验过程中,并保 ...

  7. ASP.net 资源请求漏洞利用工具PadBuster

    ASP.net 资源请求漏洞利用工具PadBuster 在ASP.net 网站中,为了便于部署网站项目,开发者往往会将资源(图片.Javascript文件)嵌入到dll文件中.而网页中,会使用WebR ...

  8. fetch 如何请求数据

    fetch 如何请求数据 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好 二 与 ...

  9. 微擎JS资源请求 403

    微擎JS资源请求 403 1.确认JS是否指定 type ==> text/javascript 2.确认src的路径是否正确,{MODULE_URL}项目的根目录带反斜杠 3.实例:(PS:t ...

随机推荐

  1. [No000087]Linq排序,SortedList排序,二分法排序性能比较

    using System; using System.Collections; using System.Collections.Generic; using System.Diagnostics; ...

  2. [No000073]C#直接删除指定目录下的所有文件及文件夹(保留目录)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. thinkphp怎么实现图片验证码

    1.控制器 function verify() { ob_clean();//丢弃输出缓冲区中的内容 $config = array( 'fontSize' => 20, // 字体大小 'le ...

  4. Python-03-基础

    一.集合 集合(set)是一个无序的.不重复的元素组合,它的主要作用如下: 去重:把一个列表变成集合,就会自动去重. 关系测试:测试两组数据之前的交集.差集.并集等关系. 常用操作 # 创建数值集合 ...

  5. json jsonp的区别

     前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域 ...

  6. ASP.net MVC 学习笔记(一)-一些不同点

    1.在 MVC 中,请求到 Controller 中时,系统会判断是那个类的方法当执行完 return 时,系统会自动在 View 中寻找同名的 aspx 文件 来进行展示 实际上每一个 Contro ...

  7. 微信小程序之知乎日报

    上一次的<微信小程序之小豆瓣图书>制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识.而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多.在我编写这 ...

  8. go 数组(array)、切片(slice)、map、结构体(struct)

    一 数组(array) go语言中的数组是固定长度的.使用前必须指定数组长度. go语言中数组是值类型.如果将数组赋值给另一个数组或者方法中参数使用都是复制一份,方法中使用可以使用指针传递地址. 声明 ...

  9. winform采集网站美女图片程序---多线程篇

    设定思路: 采集目标: http://www.8kmm.com,   已知网址列表(List保存),  应用多线程(Thread)读取该列表, 获取url时不能重复(加锁Lock). 允许无序采集! ...

  10. Activity数据传递

    1.在启动界面里通过intent调用方法putExtra添加欲携带数据 2.在被启动界面里通过getIntent方法获取Intent对象 3.通过intent的getXxxExtra方法获取对应的数据