之前 师傅跟我提过 一个新的Ajax API  fetch 今天看到一篇关于fetch的文章,受益匪浅。

XMLHttpRequest并不是专为Ajax而设计的,虽然各种框架对XHR的封装已经足够好用。但这里介绍的window.fetch 方法更好用,在最新版的Firefox Chrome 中已经提供支持。

fetch的基本使用:

fetch 是全局变量window的一个方法,第一个参数是URL:

和Battery API类似,fetch API也使用了JAvascript Promises来处理结果/回调。

如果 你还不习惯 then 方式的写法,要好好学习一下了,因为很快会全面流行。

自定义请求头信息极大地增强了请求的灵活性。我们可以通过 new Headers()来创建请求头:

可以使用的方法包括:append ,has ,get , set ,delete. 需要创建一个Request 对象来包装请求头:

下面介绍Response Request 的使用方法:

Request:

Request对象表示一次fetch 调用 的请求信息。传入Request参数来调用fetch,可以执行很多自定义请求的高级用法:

method - 支持GET, POST, PUT, DELETE, HEAD

url - 请求的url

headers - 对应的Headers对象

reference - 请求的referrer 信息

mode - 可以设置 cors, no-cors, same-origin

credentials - 设置cookies是否随请求一起发送。可以设置:omit, same-origin

integrity - subresource完整性值(integrity value)

cache - 设置cache模式(default, reload, no-cache)

Request的示例如下:

只有第一个参数 URL是必须的,在Request对象创建完成之后,所有的属性都变为只读属性。Request有一个很重要的 clone 方法,特别是在 Service Worker API 中使用时——一个Request就代表一串流(stream),如果想要传递给另一个fetch方法,则需要进行克隆。

fetch 的方法签名(signature,可理解为配置参数),和Request很像,示例如下:

因为Request 和fetch 的签名一致 所以在Service Workers中,你可能会更喜欢使用Request对象。

Response:

Response 代表响应,fetch 的then 方法接受一个Response实例,当然你也可以手动创建Response对象——比如在 service workers中可能会用到

Response可以配置的参数:

type - 类型,支持:basic, cors

url

useFinalURL - Boolean 值,代表url是否是最终URL

status - 状态码(例如:200,404)

ok - Boolean值,代表成功响应(status值在200-299之间)

statusText - 状态值(例如:OK)

headers - 与响应相关联的Headers对象

Response 提供的方法如下:

clone() - 创建一个新的Response克隆对象

error() - 返回一个新的,与网络错误相关的Response对象

redirect() - 重定向,使用新的URL创建新的Response对象

arrayBuffer() - Returns a promise that resolves with an ArrayBuffer

blob() - 返回一个promise,resolves是一个Blob

formData() - 返回一个promise, resolves是一个FormData对象

json() - 返回一个promise,resolves是一个JSON对象

text() - 返回一个promise,resolves是一个USVString(text)

处理JSON响应:

假设需要请求JSON——回调结果对象response中有一个json()方法,用来将原始数据转换成Javascript对象:

当然这很简单 只是封装了JSON.parse(jsonString)而已,但json方法还是很方便的

处理基本的Text/HTML响应

JSON并不总是理想的请求/响应数据格式,那么我们看看如何处理HTML或文本结果:

如上面的代码所示,可以在Promise链式的then方法中,先返回text()结果,再获取text

处理Blob结果:

如果你想通过fetch加载图像或者其他二进制数据,则会略不同:

响应 Body mixin 的blob()方法处理响应流(Response stream),并且将其读完

另一种常用的AJAX调用是提交表单数据--示例如下:

    fetch('/submit',{
method: 'post',
body:new FormData(document.getElementById);
});

提交JSON的示例如下:

  fetch('/submit-json',{
method:'post',
body:JSON.stringify({
email:document.getElementById('email');
answer:document.getElementById('answer');
})
);

最后:

fetch是个很实用的API,当前还不允许取消请求,这使得很多程序员暂时不会考虑它

新的fetch API比起XHR更简单也更智能。

原文链接:https://davidwalsh.name/fetch

如果 你想使用 fetch ,也想寻找polyfill(兼容代码)请点击: Github上的fetch实现 https://github.com/github/fetch

新一代Ajax API --fetch的更多相关文章

  1. 新一代AJAX API:FETCH

    AJAX半遮半掩的底层API是饱受诟病的一件事情. XMLHttpRequest 并不是专为Ajax而设计的. 虽然各种框架对 XHR 的封装已经足够好用, 但我们可以做得更好.更好用的API是 fe ...

  2. web API简介(一):API,Ajax和Fetch

    概述 今天逛MDN,无意中看到了web API简介,觉得挺有意思的,就认真读了一下. 下面是我在读的时候对感兴趣的东西的总结,供自己开发时参考,相信对其他人也有用. 什么是API API (Appli ...

  3. vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别

    先说一下对比吧 Jquery ajax, Axios, Fetch区别之我见 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1 ...

  4. 你不需要jQuery(三):新AJAX方法fetch()

    XMLHttpRequest来完成ajax有些老而过时了. fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能.它们之间的主要区别是,Fetch API 使用 ...

  5. 理解 ajax、fetch和axios

    背景 ajax fetch.axios 优缺点 ajax基于jquery,引入时需要引入庞大的jquery库,不符合当下前端框架,于是fetch替代了ajax 由于fetch是比较底层,需要我们再次封 ...

  6. 前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

    一.ajax.fetch 和 axios 简介 1.1.ajax ajax是最早出现发送后端请求的技术,属于原生 js .ajax使用源码,请点击<原生 ajax 请求详解>查看.一般使用 ...

  7. Jquery ajax, Axios, Fetch区别

    1.   Jquery ajax, Axios, Fetch区别之我见 2.   ajax.axios.fetch之间的详细区别以及优缺点

  8. Jquery ajax, Axios, Fetch区别之我见(转载)

    来源:https://segmentfault.com/a/1190000012836882 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被 ...

  9. 用ajax与fetch调用阿里云免费接口

    最近学习态度比较积极,打算用react做一个小个人应用网站...所以从阿里云上买了些免费的接口,什么QQ音乐排行查询接口.IP地址查询.天气预报等等.调用时,发现身份校验可以通过简单修改头部信息的方式 ...

随机推荐

  1. JAVA NIO系列(二) Channel解读

    Channel就是一个通道,用于传输数据,两端分别是缓冲区和实体(文件或者套接字),通道的特点(也是NIO的特点):通道中的数据总是要先读到一个缓冲区,或者总是要从一个缓冲区中读入. Channel的 ...

  2. ibatis输入多个参数

    ibatis输入多个参数     在ibatis中,会发现其输入参数只能有一个,于是当出现需要进行多个输入参数的时候,就要想点办法了,我看到的有以下两种比较好的方法能够解决这个问题1) 用String ...

  3. 【Python + Selenium】Mock Testing 是啥?一个so上的高票答案。

    There are many kinds of testing which really made me confused. To be honest, I've never heard of som ...

  4. android stduio 引入 .so

  5. Python对时间的转换

    1.将字符串的时间转换为时间戳 方法: a = "2013-10-10 23:40:00" 将其转换为时间数组 import time timeArray = time.strpt ...

  6. VMWare虚拟机下为Ubuntu 12.04.1配置静态IP(NAT连接方式)

    背景 在虚拟机下运行操作系统,尤其是Linux系统已经是非常常见的做法.有时你想在虚拟机下搭建一个(模拟)服务器来供主机访问,比如搭建一个telnet/ssh.此时你会发现,每次启动虚拟机,VMWar ...

  7. Centos搭建Python+Nginx+Tornado+Mysql环境[转载]

    Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大型的入 ...

  8. Steve Loughran:Why not raid 0,its about time and snowflakes!!!

    与RAID-0阵列的同组管理相比,Hadoop更喜欢一组单独磁盘.在Hadoop集群中,读取速度是最能体现性能的重要指标.在Steve Loughran文章中,尤其强调了这一点,他还指出,由于驱动器速 ...

  9. android开发中难免遇到listview刷新数据出现异常

    异常:java.lang.IllegalStateException: The content of the adapter has changed but ListView did not rece ...

  10. BeanDefinitionStoreException

    异常摘要 org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML documen ...