专栏首页WebJ2EEFetch:新一代Ajax API

Fetch:新一代Ajax API

一直以来,我们使用的Ajax技术,实际是由各浏览器的XMLHttpRequest(XHR)对象实现。但由于XHR接口难用而且落后(不能Promise),所以实际项目中一般采用jQuery这种第三方库封装的Ajax功能。

Fetch API,W3C的正式标准,是XMLHttpRequest的最新替代技术:

  • 基于 Promise 设计
  • 语义化API(Header、Request、Response)
  • 良好的数据转换接口(text()、json())
  • React技术栈中的一员..

下图是3种资源请求方式

很明显,FetchAPI更现代、更清晰

1. Fetch经典示例

语法:

fetch(url, initParams) fetch(new Requst(url, initParams)) 注:上面2种写法等价

initParams常用参数说明:

method:"GET", "POST",默认为GET;

url: 请求的url;

headers: 请求携带的Headers对象;

body: POST请求主体;

注:GET请求中携带body会报错!

credentials: "omit"、"same-origin"、"include",默认为"omit";

注:omit->从不发送Cookie;

same-orign->同源才发送Cookie;

include->总是发送Cookie;

response常用方法说明:

status: 响应状态码(例如:200,成功); statusText: 与状态码一致的状态信息; ok:表示响应成功(200~299)还是失败; headers: 响应中的Headers对象; bodyUsed: 标识response是否已经被读取过; 注:Fecth API为保持对未来“流”API的支持, 限制response只能被读取一次; json(): 返回被解析为JSON格式的Promise对象; text(): 返回被解析为String格式的Promise对象;

Headers常用方法说明:

append(name,value) delete(name) get(name) getAll() has(name) set(name,value) headers.keys() headers.values()

例:

2. 使用Fetch上传文件

喜大普奔!!

可以用Fetch上传文件!!

以前我们上传文件只能通过Form的submit,为了处理上传成功的回调,出现了很多稀奇古怪的hack写法,现在Fetch就允许我们自行控制上传流程!!!

例:

怎么样?很给力有木有!!

更详细的Fetch API说明,请参考MDN官网....

参考:

https://fetch.spec.whatwg.org/ https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

本文分享自微信公众号 - WebJ2EE(WebJ2EE),作者:WEBJ2EE

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WEB:还是文件上传...

    IE8、9环境下,只能用 form 上传文件,而且 <input type="file"> 只能单选;

    WEBJ2EE
  • 【前端】:变量提升、this绑定、 优先级与关联性

    Conceptually, for example, a strict definition of hoisting suggests that variabl...

    WEBJ2EE
  • HTML5:File API

    FileReader 是一种异步文件读取机制,用于读取File、Blob中的文件数据。

    WEBJ2EE
  • 用Eclipse开发Struts实例-G

    package com.meixin.beans; public class Guestbook { private int id; priva...

    用户2398817
  • SAP中如何找增强点

    CALL METHOD cl_exithandler=>get_class_name_by_interface后面设置一个断点。然后执行业务事务代码如MIRO,...

    用户5495712
  • RPA机器人流程自动化:迈出人机协作第一步

    大数据时代,RPA和AI进入爆发式发展阶段。随着企业数字化转型的加快,职场工作模式也逐渐发生转变。

    蕉黄
  • 神奇的 conic-gradient 圆锥渐变

    Sb_Coco
  • 通俗理解Kubernetes中Service、Ingress与Ingress Controller的作用与关系

    Kubernetes 并没有自带 Ingress Controller,它只是一种标准,具体实现有多种,需要自己单独安装,常用的是 Nginx Ingress ...

    imroc
  • 通俗理解Kubernetes中Service、Ingress与Ingress Controller的作用与关系

    Kubernetes 并没有自带 Ingress Controller,它只是一种标准,具体实现有多种,需要自己单独安装,常用的是 Nginx Ingress ...

    imroc
  • 【原创】自己动手实现RPC服务调用框架

    Java高级架构

扫码关注云+社区

领取腾讯云代金券