前言

Fetch API是新的ajax解决方案,用于解决古老的XHR对象不能实现的问题,Fetch API 提供了一个获取资源的接口(包括跨域请求),任何使用过 XMLHttpRequest 的人都能轻松上手,但新的API提供了更强大和灵活的功能集。

主要优点:

  • 语法简单,更加语义化
  • 基于标准的Promises实现,支持async/await

概念和用法

Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。使之今后可以被使用到更多地应用场景中:无论是service workers、Cache API、又或者是其他处理请求和响应的方式,甚至是任何一种需要你自己在程序中生成响应的方式。

它同时还为有关联性的概念,例如CORS和HTTP原生头信息,提供一种新的定义,取代它们原来那种分离的定义。

发送请求或者获取资源,需要使用 WindowOrWorkerGlobalScope.fetch 方法。它在很多接口中都被实现了,更具体地说,是在Window 和 WorkerGlobalScope接口上。因此在几乎所有环境中都可以用这个方法获取到资源。

fetch() 必须接受一个参数——资源的路径。无论请求成功与否,它都返回一个 Promise 对象,resolve 对应请求的 Response。你也可以传一个可选的第二个参数init(参见 Request)。

一旦 Response 被返回,就有一些方法可以使用了,比如定义内容或者处理方法(参见 Body)。

你也可以通过 Request() 和 Response() 的构造函数直接创建请求和响应,但是我们不建议这么做。他们应该被用于创建其他 API 的结果(比如,service workers 中的 FetchEvent.respondWith)。

注意:更多关于 Fetch API 的用法,参考 Using Fetch,以及一些概念 Fetch basic concepts

最简单典型的用法

本文假设一个服务器环境,有一个test.html和一个test.php。

fetch('test.php')
.then(function(res) {
res.json().then(function(data) {
console.log(data);
});
})
.catch(function(err) {
console.log('Fetch Error : %S', err);
})

Fetch API跟Promises的关系

console.log(fetch('test.php')); // 返回一个Promise对象

两者关系就一句话:fetch()本身就返回一个Promise对象。所以,它就可以用Promises的所有方法。

fetch的参数

第一个参数:毫无疑问是要获取资源的URL。

第二个参数:options对象,包括:

  • method: 请求使用的方法,如 GET、POST。
  • headers: 请求的头信息,形式为 Headers 的对象或包含 ByteString 值的对象字面量。
  • body: 请求的 body 信息:可能是一个 BlobBufferSourceFormDataURLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
  • mode: 请求的模式,如 cors、 no-cors 或者 same-origin。
  • credentials: 请求的 credentials,如 omitsame-origin 或者 include。为了在当前域名内自动发送 cookie , 必须提供这个选项, 从 Chrome 50 开始, 这个属性也可以接受 FederatedCredential 实例或是一个 PasswordCredential 实例。
  • cache: 请求的 cache 模式: defaultno-store 、 reload 、 no-cache 、 force-cache或者 only-if-cached 。
  • redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向),在Chrome中,Chrome 47之前的默认值是 follow,从 Chrome 47开始是 manual。
  • referrer: 一个 USVString ,可以是 no-referrerclient或一个URL。默认是 client
  • referrerPolicy: Specifies the value of the referer HTTP header. May be one of no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
  • integrity: 包括请求的 subresource integrity 值 ( 例如: sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)。

上面诸多option中,其实常用的就是methodheadersbody以及mode等。

注意:更多关于 Fetch API 的用法,参考 Using Fetch,以及一些概念 Fetch basic concepts

Fetch API 接口参考的更多相关文章

  1. Web API 接口参考

    Web API 接口参考:https://developer.mozilla.org/zh-CN/docs/Web/API

  2. Window.sessionStorage - Web API 接口参考 | MDN

    参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage sessionStorage 属性允许你访问一个 s ...

  3. Angular 调用百度地图API接口

    Angular 调用百度地图API接口 参考原文:https://blog.csdn.net/yuyinghua0302/article/details/80624274 下面简单介绍一下如何在Ang ...

  4. 转载-常用API接口签名验证参考

    原文地址: http://www.cnblogs.com/hnsongbiao/p/5478645.html 写的很好,就做个笔记了.感谢作者! 项目中常用的API接口签名验证方法: 1. 给app分 ...

  5. 常用API接口签名验证参考

    项目中常用的API接口签名验证方法: 1. 给app分配对应的key.secret2. Sign签名,调用API 时需要对请求参数进行签名验证,签名方式如下: a. 按照请求参数名称将所有请求参数按照 ...

  6. 了解 Fetch API与Fetch+Async/await

    背景 提及前端与服务器端的异步通信,离不开 Ajax (Asynchronous JavaScript and XML).实际上我们常说的 Ajax 并非指某一项具体的技术,它主要是基于用脚本操作 H ...

  7. 12306官方火车票Api接口

    2017,现在已进入春运期间,真的是一票难求,深有体会.各种购票抢票软件应运而生,也有购买加速包提高抢票几率,可以理解为变相的黄牛.对于技术人员,虽然写一个抢票软件还是比较难的,但是还是简单看看123 ...

  8. 快递Api接口 & 微信公众号开发流程

    之前的文章,已经分析过快递Api接口可能被使用的需求及场景:今天呢,简单给大家介绍一下微信公众号中怎么来使用快递Api接口,来完成我们的需求和业务场景. 开发语言:Nodejs,其中用到了Neo4j图 ...

  9. HTTP API接口安全设计

    HTTP API接口安全设计 API接口调用方式 HTTP + 请求签名机制   HTTP + 参数签名机制 HTTPS + 访问令牌机制 有没有更好的方案? OAuth授权机制 OAuth2.0服务 ...

随机推荐

  1. 三种常用的MySQL建表语句

    MySQL建表语句是最基础的SQL语句之一,下面就为您介绍最常用的三种MySQL建表语句,如果您对MySQL建表语句方面感兴趣的话,不妨一看. 1.最简单的: CREATE TABLE t1(    ...

  2. 多线程和Socket——在线聊天室

    多线程开发和Socket技术 一.进程和线程 进程:每个应用程序对应一个进程: 线程:一个进程至少包含一个线程,线程要和CPU进行交互. 多线程并发(可以理解为):"同一时间"执行 ...

  3. Linux-系统负载

    cat /proc/loadavg 最直接查看系统平均负载命令 root@Slyar.com:~# cat /proc/loadavg 0.10 0.06 0.01 1/72 29632 除了前3个数 ...

  4. [转载]Linux下终端字体颜色设置方法

    原文地址:Linux下终端字体颜色设置方法作者:router 网上类似的文章有很多,但是都是转来转去的,没有经过测试,按照很多文章的方法会造成你设置之后的终端在换行和删除输入字符时终端显示会乱七八糟, ...

  5. 线程同步之mutex和Semaphore

    表示之前对semaphore信号量木有神码概念. 比较纳闷这玩意要干嘛,好吧继续stackflow: Mutex can be released only by thread that had acq ...

  6. 如何在windows下安装JDK

    1:卸载 A:一定要删除注册表中的 HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft 项 B:最好用安装工具卸载JDK,如果没有的话就删除JDK文件夹然后用Wise Regis ...

  7. MVC+Spring.NET+NHibernate .NET SSH框架整合 C# 委托异步 和 async /await 两种实现的异步 如何消除点击按钮时周围出现的白线? Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法

    MVC+Spring.NET+NHibernate .NET SSH框架整合   在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MV ...

  8. Linux伙伴算法

    Linux内存管理伙伴算法 伙伴算法 Linux内核内存管理的任务包括: 遵从CPU的MMU(Memory Management Unit)机制 合理.有效.快速地管理内存 实现内存保护机制 实现虚拟 ...

  9. Java之基于S2SH与手机数据交互(一)

    在前两篇博客,介绍了在eclipse上搭建SSH,可是好多小伙伴反映.看了偶写滴博客.跟着搭建还是错误百出,唉! 事实上不经历错误怎么能不见红线啊!于是我在上篇博客补充了他们的错误,还在被错误困扰的童 ...

  10. 手动脱WinUpack 壳实战

    作者:Fly2015 吾爱破解培训第一课选修作业第6个练习演示样例程序.不得不反复那句话,没见过这样的壳,该壳是压缩壳的一种,相对于压缩壳,加密壳的难度要大一些.特别是IAT表的修复问题上. 首先分别 ...