首页 > 其他分享 >fetch 请求 stream 流接口并使用 AbortController 中断结果响应

fetch 请求 stream 流接口并使用 AbortController 中断结果响应

时间:2023-12-29 18:46:57浏览次数:41  
标签:const stream abortController signal AbortController api fetch

1. 使用fetch请求stream流接口:

封装fetch工具方法 fetchRequest.js

const fetchStream = async (url, options) => {
  const response = await fetch(url, options);
  if (response.status !== 200) {
    return false;
  }
  const reader = response.body.getReader();
  return reader;
};

export default fetchStream;

统一管理api api.js

// 引入封装好的 fetchRequest.js
import fetchRequest from "./fetchRequest";

const abortController = new AbortController();
const abortSignal = abortController.signal;

// 请求
export function chatApi(data) {
  return fetchRequest("/api/xxx", {
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    signal: abortSignal,
    body: JSON.stringify(data),
  });
}

// 中断请求方法
export function abortFetch() {
  abortController.abort();
}

使用封装好的方法进行请求,并处理响应结果

...
let params = {
    message: xxx,
};
let reader = await $api.chatApi(params);
while (true) {
  const { value, done } = await reader.read();
  if (done) {
    break; // 读取完毕
  } else {
    console.log("message: ", new TextDecoder().decode(value));
  }
}
...

2. 使用AbortController中断请求:

AbortController 是一个用于控制一个或多个 AbortSignal 对象的接口,通过调用 AbortController 的 abort 方法,可以中断一个或多个关联的 AbortSignal。
上面的 api.js 中,AbortController 创建了一个与 fetch 请求关联的 AbortSignal,然后将该 AbortSignal 传递给 fetch 的 signal 选项。当需要中断请求时,调用 abortController.abort() 方法即可。

注意fetch请求中设置的 signal: abortSignal

const abortController = new AbortController();
const abortSignal = abortController.signal;

function abortFetch() {
  abortController.abort();
}
// 按自己导出的方式引入并使用中断请求
import {abortFetch} from "./api.js"
abortFetch();

3. 参考文档

AbortController 文档

标签:const,stream,abortController,signal,AbortController,api,fetch
From: https://www.cnblogs.com/lpkshuai/p/17935522.html

相关文章

  • 1. Stream
    JavaStream是Java8引入的一个新特性,用于处理集合数据。StreamAPI提供了一种声明式、函数式的方式来处理集合,使得代码更加简洁、易读。StreamAPI:StreamAPI是Java8中引入的一个新特性,它允许对集合进行更强大和灵活的操作。通过使用StreamAPI,可以轻松地过滤、映射、排序和......
  • flink中的setStreamTimeCharacteristic 指定为EventTime的source需要自己定义event ti
    flink中的setStreamTimeCharacteristicTimeCharacteristic   env.setStreamTimeCharacteristic(TimeCharacteristic.EventTime) 此处可以取以下三类值:EventTime事件时间,事件(Event)本身的时间,即数据流中事件实际发生的时间,通常使用事件发生时的时间戳来描述,这些......
  • 问题1:Ubuntu执行`sudo apt install XXX`报错出现Failed to Fetch
    报错问题:解决方案:1.查看自己Ubuntu的版本:lsb_release-a(LSB是LinuxStandardBase(Linux标准库)的缩写, lsb_release命令 用来与具体Linux发行版相关的Linux标准库信息)获取版本号之后进入:https://mirrors.tuna.tsinghua.edu.cn/help/ubuntu/2.进入网址......
  • 无涯教程-Java9 - Stream API增强
    Java9改进的StreamAPI添加了一些便利的方法,使流处理更容易,并使用收集器编写复杂的查询。Java9为Stream新增了几个方法:dropWhile、takeWhile、ofNullable,为iterate方法新增了一个重载方法。takeWhile语法defaultStream<T>takeWhile(Predicate<?superT>predic......
  • stream的优化:java封装的拆箱与装箱的弊端
    authors.stream().map(author->author.getAge).map(age->age+10)//Stream<Integer>.filter(age>18)//Stream<Integer>.foreach(System.out::println);上述是一个简单的stream流的使用,当我们拆开第二个map,或者filter的时候会发现,传入和传出的参数都是Intege......
  • DataStream(二)
    DataStream(二)目录 5.3.2聚合算子(Aggregation)5.3.3用户自定义函数(UDF)3.扁平映射(flatMap)flatMap操作又称为扁平映射,主要是将数据流中的整体(一般是集合类型)拆分成一个一个的个体使用。消费一个元素,可以产生0到多个元素。flatMap可以认为是“扁平化”(flatten)和“映......
  • C# 中使用 using 关键字和不使用 using 关键字创建 FileStream
    在C#中使用using关键字和不使用using关键字创建FileStream实例之间有一些区别。使用using关键字:using(FileStreamfileStream=newFileStream(filePath,FileMode.Open,FileAccess.Read)){//使用fileStream进行操作}using关键字用于创建FileStream......
  • 写写stream流的终结操作
    终结操作和中间操作的区别:中间操作返回的一直都是stream,所以可以一直使用,但是终结操作返回的不是stream,后面不能继续操作 foreach:对流中的所有元素进行遍历操作count:获取当前流内元素的个数//这个是无参的max&min:这个也是需要比较器的,具体写法和sort差不多,但是返回值是Option......
  • java集合stream操作
    forEach-遍历Stream<Integer>stream=Stream.of(2,3,1,4);stream.forEach(System.out::println);filter-过滤Stream<Integer>stream=Stream.of(2,3,1,4);Stream<Integer>newStream=stream.filter(num->num>2);System.out.pr......
  • 19. git fetch origin和git fetch master和git fetch origin master有啥区别
     gitfetch用法可以有一些不同的变体,下面分别解释一下这三种用法的区别:gitfetchorigin:这个命令会从远程仓库(通常命名为"origin")中获取所有分支和标签的最新信息,但不会合并任何变更到你的本地分支。它是获取远程仓库中所有分支和标签的快捷方式,让你可以查看其他人在远程仓库......