前言

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. Inno Setup入门(八)——有选择性的安装文件

    这主要使用[Components]段实现,一个演示的代码如下: [setup] ;全局设置,本段必须 AppName=Test AppVerName=TEST DefaultDirName=" ...

  2. AngleSharp 的Dom 选择器

    AngleSharp https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll Element.querySe ...

  3. yum安装提示错误Thread/process failed: Thread died in Berkeley DB library

    问题描述: yum 安装更新提示 rpmdb: Thread/process failed: Thread died in Berkeley DB library 问题解决: 01.删除yum临时库文 ...

  4. (原)InsightFace及其mxnet代码

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/8525287.html 论文 InsightFace : Additive Angular Margin ...

  5. webDriver.Close() 和 webDriver.Quit() 、webDriver.Dispose() 的区别

    1. webDriver.Close() - Close the browser window that the driver has focus of //关闭当前焦点所在的窗口2. webDriv ...

  6. iOS 组件化方案

    概述 近一年iOS业界讨论组件化方案甚多,大体来说有3种. Protocol注册方案 URL注册方案 Target-Action runtime调用方案 URL注册方案据我了解很多大公司都在采用,蘑菇 ...

  7. 基本的RAID介绍

    RAID是一个我们经常能见到的名词.但却因为很少能在实际环境中体验,所以很难对其原理 能有很清楚的认识和掌握.本文将对RAID技术进行介绍和总结,以期能尽量阐明其概念. RAID全称为独立磁盘冗余阵列 ...

  8. NBUT [1475] Bachelor

    [1475] Bachelor http://acm.nbut.cn:8081/Problem/view.xhtml?id=1475 时间限制: 1000 ms 内存限制: 65535 K 问题描述 ...

  9. HTTP 请求头 Header

    HTTP 请求头 Header HTTP请求头概述 (HttpServletRequest) HTTP客户程序(例如浏览器),向服务器发送请求的时候必须指明请求类型(一般是GET或者POST或者HEA ...

  10. 图片标注工具LabelImg使用教程

    1.进入labelImg-master文件夹,在空白处使用 “Shift+鼠标右键” ,选择在此处打开命令窗口,依次输入下面语句即可打开软件. pyrcc4 -o resources.py resou ...