Ajax 之战:XMLHttpRequest 与 Fetch API

2022-05-07 12:43:01   阅读:362 次  点赞:69 次  鄙视:93 次  收藏:0 次  由 www.luyingw.com.cn 收集整理
分享到:
关闭
听新闻 - Ajax 之战:XMLHttpRequest 与 Fetch API
00:00 / 00:00

-

+

语速: 慢速 默认 快速
- 6 +
自动播放×

御姐音

大叔音

萝莉音

型男音

温馨提示:
是否自动播放到下一条内容?
立即播放当前内容?
确定
确定
取消

原标题:Ajax 之战:XMLHttpRequest 与 Fetch API

作者 | Craig Buckler

译者 | Phoenix

策划 | 闫园园

本文最初发布于 OpenReplay 博客,由 InfoQ 中文站翻译并分享。

Ajax 是大多数 web 应用程序背后的核心技术,它允许页面向 web 服务发出异步请求,因此数据可以不经过页面往返服务器无刷新显示数据。

术语 Ajax 不是一种技术,相反,它指的是从客户端脚本加载服务器数据的方法。多年来已经引入了几种选择,目前有两种主要方法,大多数 Java 框架使用其中一种或两种。

在本文中,我们将研究早期 和现代 Fetch 的优缺点,以确定哪种 Ajax API 最适合你的应用。

在 1999 年首次作为非标准的 Internet Explorer 5.0 ActiveX 组件出现,微软开发它是为了支持基于浏览器的 Outlook 版本,XML 是当时最流行(或被宣扬)的数据格式,除此之外, 还支持文本和尚未发明的 JSON。

Jesse James Garrett 在他 2005 年的文章《AJAX: Web 应用程序的新方法》中提出了“AJAX”概念,那时谷歌邮箱和谷歌地图等基于 AJAX 的应用程序已经存在,但是这个术语激励了开发人员,并引起了流畅的 Web 2.0 体验爆炸式增长。

AJAX 是“Asynchronous Java and XML”的缩写,尽管严格地说,开发人员并不需要使用异步方法、Java 或 XML。我们现在将通用的“Ajax”术语表示任何从服务器获取数据、更新 DOM 而无需刷新整个页面的客户端过程。

所有主流浏览器都支持 ,并在 2006 年成为官方的 web 标准。下面是一个简单的例子,从你的域 / 服务 / 端点获取数据,然后在控制台将 JSON 结果显示为文本:

// state change eventxhr.onreadystatechange = => {// is request complete?if (xhr.readyState !== 4) return;

if (xhr.status === 200) {// request successfulconsole.log(JSON.parse(xhr.responseText));} else {// request not successfulconsole.log("HTTP error", xhr.status, xhr.statusText);}};

// start requestxhr.send;

onreadystatechange 回调函数在请求的生命周期中运行好几次; 对象的 readyState 属性则返回当前状态:

展开全文
  • 0 (uninitialized) - 请求未初始化
  • 1(loading)- 服务器连接建立
  • 2(loaded)- 请求收到
  • 3(interactive)- 处理请求
  • 4(complete)- 请求完成,响应准备就绪

在达到状态 4 之前,几个函数就可以做很多事情。

Fetch

Fetch 是一个现代基于 promise 的 Ajax 请求 API,首次出现于 2015 年,在大多数浏览器中都得到了支持。它不是基于 构建的,并且用更简洁的语法提供了更好的一致性。下面的 Promise 链函数与上面的 例子相同:

或者你可以使用 async/await:

console.log(json);} catch (err) {console.error("error:", err);}

Fetch 更清晰、更简洁,并且经常在 Service worker 中使用。

开源会话重播

OpenReplay 是 FullStory 和 LogRocket 的开源替代品,它通过回放用户在你的应用程序上的一切操作,并显示每个问题的操作堆栈,提供完整的可观察性。OpenReplay 是自托管的,可以完全控制你的数据。

快乐调试吧!现代的前端团队 —— 开始自由地监控你的 web 应用程序。

第 1 回合:Fetch 获胜

与陈旧的 相比,Fetch API 除了具有更清晰简洁的语法之外,还有其它几个优势。

头、请求和响应对象

上面简单 fetch 示例中,使用一个字符串定义 URL 端点,也可以传递一个可配置的 Request 对象,它提供了有关调用的一系列属性:

console.log(request.url);console.log(request.method);console.log(request.credentials);

// FormData representation of bodyconst fd = await request.formData;

// clone requestconst req2 = request.clone;

const res = await fetch(request);

Response 对象提供了对访问所有详细信息的类似访问:

const json = await res.json; // parses body as JSONconst text = await res.text; // parses body as textconst fd = await res.formData; // FormData representation of body

Headers 对象提供了一个简单的接口来设置请求中的头信息或获取响应中的头信息:

const request = new Request("http://www.sohu.com/service", {method: "POST",headers,});

const res = await fetch(request);

// examine response headersconsole.log(res.headers.get("Content-Type"));

缓存控制

在 中管理缓存具有挑战性,你可能会发现有必要附加一个随机查询字符串值来绕过浏览器缓存,Fetch 方法在第二个参数 init 对象中内置了对缓存的支持:

缓存可以设置为:

  • 'default' —— 如果有一个新的 (未过期的) 匹配,则使用浏览器缓存;如果没有,浏览器会发出一个带条件的请求来检查资源是否已改变,并在必要时会发出新的请求
  • 'no-store' —— 绕过浏览器缓存,并且网络响应不会更新它
  • 'reload' —— 绕过浏览器缓存,但是网络响应会更新它
  • 'no-cache' —— 类似于'default',除了一个条件请求总是被做
  • 'force-cache' —— 如果可能,使用缓存的版本,即使它过时了
  • 'only-if-cached' —— 相同的 force-cache,除了没有网络请求

跨域控制

跨域共享资源允许客户端脚本向另一个域发出 Ajax 请求,前提是该服务器允许 Access-Control-Allow-Origin 响应头中的源域;如果没有设置这个参数, fetch 和 都会失败。但是,Fetch 提供了一个模式属性,可以在第二个参数的 init 对象中设置‘no-cors’属性。

这将返回一个不能读取但可以被其它的 API 使用的响应。例如,你可以使用 Cache API 存储返回再之后使用,可能从 Service Worker 返回一个图像、脚本或 CSS 文件。

凭证控制

总是发送浏览器 cookie,Fetch API 不会发送 cookie,除非你显式地在第二个参数 init 对象中设置 credentials 属性。

credentials 可以设置为:

  • 'omit' —— 排除 cookie 和 HTTP 认证项 (默认)
  • 'same-origin' —— 包含对同源 url 的请求的凭证
  • 'include' —— 包含所有请求的凭证

请注意,include 是早期 API 实现中的默认值,如果你的用户可能运行旧的浏览器,就得显式地设置 credentials 属性。

重定向控制

默认情况下,fetch 和 都遵循服务器重定向。但是,fetch 在第二个参数 init 对象中提供了替代选项:

redirect 可以设置为:

  • 'follow' —— 遵循所有重定向(默认)
  • 'error' —— 发生重定向时中止(拒绝)
  • 'manual' —— 返回手动处理的响应

数据流

将整个响应读入内存缓冲区,但是 fetch 可以流式传输请求和响应数据,这是一项新技术,流允许你在发送或接收时处理更小的数据块。例如,你可以在完全下载前处理数兆字节文件中的信息,下面的示例将传入的(二进制)数据块转换为文本,并将其输出到控制台。在较慢的连接上,你会看到更小的数据块在较长的时间内到达。

while (true) {const { value, done } = await reader.read;if (done) break;console.log(value);}

服务器端支持

Deno 和 Node 18 中完全支持 Fetch,在服务器和客户端使用相同的 API 有助于减少认知成本,还提供了在任何地方运行的同构 Java 库的可能性。

第二轮: 获胜

尽管存在缺陷, 还是有一些技巧可以超越 ajax Fetch。

进度支持

我们可以监控请求的进度,通过将一个处理程序附加到 对象的进度事件上。这在上传大文件(如照片)时特别有用:

// progress eventxhr.upload.onprogress = (p) => {console.log(Math.round((p.loaded / p.total) * 100) + "%");};

事件处理程序传递的对象有三个属性:

Fetch API 没有提供任何方法来监控上传进度。

超时支持

对象提供了一个 timeout 属性,可以将其设置为请求自动终止前允许运行的毫秒数;如果超时,就触发一个 timeout 事件来处理:

fetch 中可以封装一个函数来实现超时功能:

或者,你可以使用 Promise.race:

这两个方法都不容易使用,另外请求将在后台继续运行。

中止支持

运行中的请求可以通过 的 abort 方法取消,如有必要,可以附加一个 abort 事件来处理:

// ...

xhr.onabort = => console.log("aborted");xhr.abort;

你可以中止一个 fetch,但它不是那么直接,需要一个 AbortController 对象:

fetch("http://www.sohu.com/service", {method: "GET",signal: controller.signal,}).then((res) => res.json).then((json) => console.log(json)).catch((error) => console.error("Error:", error));

// abort requestcontroller.abort;

当 fetch 中止时,catch 块执行。

更显式的故障检测

当开发人员第一次使用 fetch 时,假设一个 HTTP 错误,如 404 Not Found 或 500 Internal Server error 将触发 Promise 拒绝并运行相关的 catch 块,这似乎是合乎逻辑的,但事实并非如此:Promise 成功地解决了这些响应,只有当网络没有响应或请求被中断时,才会发生拒绝。

fetch 的 Response 对象提供了 status 和 ok 属性,但并不总是显式地需要检查它们, 更明确,因为单个回调函数处理每一个结果:你应该在每个示例中都看到 stuatus 检查。

浏览器支持

我希望你不必支持 Internet Explorer 或 2015 年之前的浏览器版本,但如果是这样的话, 是你唯一的选择。 也很稳定的,API 不太可能更新。Fetch 比较新,还缺少几个关键特性,虽然更新不太可能破坏代码,但你可以期待一些维护。

应该使用哪个 API ?

大多数开发人员都会使用更新的 Fetch API,它的语法更简洁,比 更有优势;也就是说,这些好处中的许多都有特定的用例,但在大多数应用程序中都不需要它们。只有两种情况下 仍必不可少:

这两种选择都很有趣,值得详细了解它们!

原文链接:

https://blog.openreplay.com/ajax-battle--vs-the-fetch-api

IT老兵聊如何成为Sun公司第8号员工,网友:怀念那个“从无到有”的技术年代

中国软件,从繁荣走向文明

撤出云平台六年后,我们做了一次“断网测试”

软件架构可能不是你想象的那个样子

点个在看少个 bug

Tags标签
加入收藏夹(0 点赞一下(69 鄙视一下(93
发表评论
内容:
剩余字数:360/360


     :: 正在为您加载评论……


每页10条,共0

相关文章

play
next
close
X

Copyright © 2021-2022 精致露营网Jingzhiluying.com -中国精致露营资源整合分享平台 商务合作联系153-5599-0481(同微信)
露营,精致露营,露营网,露营中国,露营中国网,精致露营网,去露营,露营之家,露营旅游,glamping,户外露营,露营网站,户外网站,露营资讯,房车,露营论坛,户外露营展,luying,jingzhiluying,campingchina,户外,户外装备,露营装备,精致露营装备,精致露营攻略,精致露营地,露营地,精致露营信息,露营必备,露营物品,精致露营火了,露营图片,露营的精美图片,露营背景图片,露营壁纸,夜晚的帐篷图片,露营野餐图片,精致露营图片,户外露营的照片,露营基地效果图,精致露营文案,精致露营季,露营的朋友圈文案

京ICP备09102084号 XML地图 Tags标签 APP客户端下载

×

分享到微信朋友圈

扫描二维码在微信中分享
关闭
手机客户端
APP下载