YYGod0120
XHRvsFetchCategories: Technology   2024-03-17

前言

这段时间做的ai-qa平台,遇到了一个业务需求,就是类gpt的post流式响应:通过post问题到后端,后端采用流式响应,即一段一段的返回数据,我再进行样式的渲染。在此我却遇到了问题,axios没法对post流式响应。

相反原生的Fetch却能做到post流式处理。

1//核心代码
2async function run() {
3  aborter.abort(); // cancel previous request
4  outputEl.innerText = "";
5  aborter = new AbortController();
6  const prompt = new FormData(formEl).get("prompt");
7  try {
8    const response = await fetch("http://192.168.223.26:5000/chain", {
9      signal: aborter.signal,
10      method: "POST",
11      headers: { "Content-Type": "application/json" },
12      body: JSON.stringify({
13        prompt,
14      }),
15    });
16    const reader = response.body.getReader();
17    const decoder = new TextDecoder();
18    while (true) {
19      const { done, value } = await reader.read();
20      if (done) {
21        break;
22      }
23      const decoded = decoder.decode(value, { stream: true });
24      console.log(decoded);
25      outputEl.innerText += decoded;
26    }
27  } catch (err) {
28    console.error(err);
29  }
30}
31

于是我去查了查相关资料,发现Axios好像有些地方真不如Fetch

XHR(XMLHttpRequests)

Axios是基于Promise的网络请求库,在node端使用nodejs自带的http模块,在浏览器端采用的是XMLHttpRequests。它的功能包括但不仅限于拦截请求和响应,自动转化JSON数据以及取消请求。

更多内容可以直接查看官网

这里主要是关于什么是XHR(XMLHttpRequests):

XHR是古早的浏览器内建对象,虽然名字里有XML,它不仅仅能够操作XML格式的数据,其他数据也能够操作,例如图片,文档等等。但随着更新的Fetch的出现,XHR渐渐消失,唯一留下的它的理由估计就是为了兼容旧浏览器,适配旧脚本,以及做到跟踪上传进度(Fetch做不到)。

XMLHttpRequests基础

XMLHttpRequest 有两种执行模式:同步(synchronous)和异步(asynchronous)

先来看看最常使用的异步:

1. 创建 XMLHttpRequest

1let xhr = new XMLHttpRequest();
2

2. 初始化它

1xhr.open(method, URL, [async, user, password]);
2
  • method —— HTTP 方法。通常是 "GET" 或 "POST"。
  • URL —— 要请求的 URL,通常是一个字符串,也可以是 URL 对象。
  • async —— 如果显式地设置为 false,那么请求将会以同步的方式处理,我们稍后会讲到它。
  • user,password —— HTTP 基本身份验证(如果需要的话)的登录名和密码。

3. 发送请求

1xhr.send([body]);
2

4. 监听xhr事件获取响应

  • load —— 当请求完成(即使 HTTP 状态为 400 或 500 等),并且响应已完全下载。
  • error —— 当无法发出请求,例如网络中断或者无效的 URL。
  • progress —— 在下载响应期间定期触发,报告已经下载了多少。
1xhr.onload = function () {
2  alert(`Loaded: ${xhr.status} ${xhr.response}`);
3};
4
5xhr.onerror = function () {
6  // 仅在根本无法发出请求时触发
7  alert(`Network Error`);
8};
9
10xhr.onprogress = function (event) {
11  // 定期触发
12  // event.loaded —— 已经下载了多少字节
13  // event.lengthComputable = true,当服务器发送了 Content-Length header 时
14  // event.total —— 总字节数(如果 lengthComputable 为 true)
15  alert(`Received ${event.loaded} of ${event.total}`);
16};
17

关于XHR的Get请求的典型代码(估计现在也用不上了):

1let xhr = new XMLHttpRequest();
2
3xhr.open("GET", "/my/url");
4
5xhr.send();
6
7xhr.onload = function () {
8  if (xhr.status != 200) {
9    // HTTP error?
10    // 处理 error
11    alert("Error: " + xhr.status);
12    return;
13  }
14
15  // 获取来自 xhr.response 的响应
16};
17
18xhr.onprogress = function (event) {
19  // 报告进度
20  alert(`Loaded ${event.loaded} of ${event.total}`);
21};
22
23xhr.onerror = function () {
24  // 处理非 HTTP error(例如网络中断)
25};
26

上传进度

前面提到过,XML可以做到Fetch做不到的跟踪上传进度——xhr.upload

它会生成事件,类似于 xhr,但是 xhr.upload 仅在上传时触发它们:

  • loadstart —— 上传开始。
  • progress —— 上传期间定期触发。
  • abort —— 上传中止。
  • error —— 非 HTTP 错误。
  • load —— 上传成功完成。
  • timeout —— 上传超时(如果设置了 timeout 属性)。
  • loadend —— 上传完成,无论成功还是 error。

示例:

1xhr.upload.onprogress = function (event) {
2  alert(`Uploaded ${event.loaded} of ${event.total} bytes`);
3};
4
5xhr.upload.onload = function () {
6  alert(`Upload finished successfully.`);
7};
8
9xhr.upload.onerror = function () {
10  alert(`Error during the upload: ${xhr.status}`);
11};
12

Fetch

Fetch是一个现代通用的JS网络请求方法

它的优点在于:

  • 支持async/await
  • 写法简单,api易上手
  • 脱离了XHR,是ES规范里的实现方法

但它依旧有缺点:

  • 浏览器不支持,需要polyfill
  • 默认无cookie
  • HTTP错误不会导致Promise返回reject
  • 不支持查看上传进度
  • 不支持超时控制

接下来让我们看看Fetch的相关流程

Fetch基础

基本语法:

1let promise = fetch(url, [options]);
2

浏览器立即启动请求,并返回一个该调用代码应该用来获取结果的 promise。获取响应通常需要经过两个阶段。

第一阶段,当服务器发送了响应头(response header),fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析。

在这个阶段,我们可以通过检查响应头的状态来确认请求是否成功,如果fetch没法成功建立,也就是遇到网络问题等网络本身问题,promise就会reject。

因此一切服务器的返回:404or500等等,都不会导致Promise返回reject,从而难以追踪错误。

第二阶段,为了获取 response body,我们需要使用一个其他的方法调用。

Response 提供了多种基于 promise 的方法,来以不同的格式访问 body:

  • response.text() —— 读取 response,并以文本形式返回 response,

  • response.json() —— 将 response 解析为 JSON 格式,

  • response.formData() —— 以 FormData 对象(在 下一章 有解释)的形式返回 response,

  • response.blob() —— 以 Blob(具有类型的二进制数据)形式返回 response,

  • response.arrayBuffer() —— 以 ArrayBuffer(低级别的二进制数据)形式返回 response,

    另外,response.body 是 ReadableStream 对象,它允许你逐块读取 body,GPTpost响应流就是基于此进行流式响应:

1const response = await fetch("http://192.168.223.26:5000/chain", {
2  signal: aborter.signal,
3  method: "POST",
4  headers: { "Content-Type": "application/json" },
5  body: JSON.stringify({
6    prompt,
7  }),
8});
9const reader = response.body.getReader();
10

我们只能选择一种读取 body 的方法。如果我们已经使用了 response.text() 方法来获取 response,那么如果再用 response.json(),则不会生效,因为 body 内容已经被处理过了。

其他

XML:可扩展标记语言(Extensible Markup Language,XML)是一种标记语言。XML是从标准通用标记语言(SGML)中简化修改出来的。

AJAX: AJAX(Asynchronous JavaScript And XML,异步 JavaScript 和 XML)是一种使用 XMLHttpRequest 技术构建更复杂,动态的网页的编程实践。其中实现方法有古早的XHR以及新的Fetch。

HTTP模块: Http模块指的是node中Http模块,包括:

  • http.createServer 担当web服务器
  • http.createClient,担当客户端,实现爬虫之类的工作。
© 2023 - 2024
githubYYGod0120