nuxt3 使用$fetch封装(typescript)客户端使用的http请求方法

nuxt3提供了usefetch()之类的方法来发起请求,他提供的这些方法貌似都是考虑和server端配合使用的,比如说在页面初始化前,有些数据是由后端提供,但是为了按SSR来渲染页面,就可以使用usefetch()来配合server先从后端获取数据,再渲染页面。所以我看文档,都是使用await等待,和之前我接触的异步请求非常不同。

而我想要的做的是由客户端直接向后端发起http请求的方法,usefetch()好像也可以设置只由客户端发起请求来使用,但是却没法由我自己来预处理后端返回的数据。

场景

后端返回的数据,有可能是json,也有可能是blob。这得由请求头"content-type"来确定。所以,需要对响应做预处理。研究了一圈,以前使用的axios貌似被nuxt3抛弃了,nuxt3支持的是fetch,那就用它自带的工具,也就不用再引入第三方库了。

let baseUrl = "http://127.0.0.1/";
// 指定后端返回的基本数据类型
export interface IResponse<T> {data?: T;code: number;headers: Headers;
}
function fetch<T>(url: string, options?: any): Promise<IResponse<T>> {return $fetch<IResponse<T>>(url, {...options,baseURL: baseUrl,onResponse({ response }) {// fetch 是会自动解析数据的,进入onResponse前就已经解析过了,它会智能地解析 JSON 和本机值,如果解析失败,则返回到文本,解析的结果就是response._datalet contentType = response.headers.get("content-type");// 请求码不为200等正常码的情况if (!response.ok) {// 这里的_data,会被后面catch捕获,因为你可能还需要获取headers等数据,所以需要在这里处理一下数据response._data = { code: -1, data: "请求已到达服务器但未正常响应:" + response.statusText, headers: response.headers };return;}// 我的后端只由json和blob两种类型,如果你的不止,那么就自己根据实际情况修改if (!contentType) {// 如果没有content-type,则认为返回的数据不符合预期response._data = { code: -1, data: "返回数据不符合预期" };return;} else if (contentType == "application/json; charset=utf-8") {//给数据再添加headersresponse._data.headers = response.headers; return;} else {// 后端返回的文件流,会包含该请求头const disposition = response.headers.get("content-disposition");if (!disposition) {response._data = { code: -1, data: "返回数据不符合预期" };return;}// 切割出文件名,后端返回格式不同处理就不同const blob = new Blob([response._data], { type: contentType });// 创建ObjectURL,返回给前端const blobUrl = window.URL.createObjectURL(blob);response._data = { code: 1, data: blobUrl, headers: response.headers };return;}},onRequestError({ error }) {// 请求失败的回调,这里的失败是指那种网络不通的之类请求都没到后端的情况,而不是后端返回码不是200之类的情况// 后端返回错误码的情况归onResponse管,这里只处理请求不通的情况},}).catch((error) => {// 请求不为200等正常码的情况,这里会捕获到,并返回给前端return error.data;});
}
// 此处的url,无需包含baseUrl
export function get<T>(url: string, params?: any) {return fetch<T>(url, { method: "get", ...params });
}export function post<T>(url: string, params?: any) {return fetch<T>(url, { method: "post", ...params });
}

关键点:fetch在onResponse()前就已经只能解析数据了,只需要通过response._data获取解析的结果就好,并且这个结果由你修改,然后前端接收的就是你修改后的结果

nuxt3 的 $fetch基于ofetch,所以,其余配置直接看它就可以,或者看nuxt3的usefetch(),它有什么参数,$fetch应该也有。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/802387.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于java+springboot+vue实现的旅游管理系统(文末源码+Lw)23-234

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统旅游管理系统信息管理难度大&#xff0c;容错率低&#…

使用yolov8实现自动车牌识别(教程+代码)

该项目利用了一个被标记为“YOLOv8”的目标检测模型&#xff0c;专门针对车牌识别任务进行训练和优化。整个系统通常分为以下几个核心步骤&#xff1a; 数据准备&#xff1a; 收集包含车牌的大量图片&#xff0c;并精确地标记车牌的位置和文本信息。数据集可能包含各种环境下的…

短剧小程序开发:解锁碎片时间的观影新风尚

随着移动互联网的飞速发展&#xff0c;人们对内容的消费方式也在不断升级。短剧作为一种新型的内容形态&#xff0c;正逐渐受到广大用户的青睐。为了满足用户随时随地观看短剧的需求&#xff0c;我们推出了全新的短剧小程序开发服务&#xff0c;为您解锁碎片时间的观影新风尚。…

C/C++中局部变量static用法实例

1. 普通局部变量存储于进程栈空间&#xff0c;使用完毕会立即释放&#xff0c;静态局部变量使用static修饰符定义&#xff0c;即使在声明时未赋初值&#xff0c;编译器也会把它初始化为0&#xff0c;并且静态局部变量存储于进程的全局数据区&#xff0c;即使函数返回&#xff0…

解密项目管理专业术语:十大名词背后的实战技巧

项目管理是一门综合学科&#xff0c;涵盖了一系列方法、技能和工具。今天为大家带来项目管理的十大专业术语&#xff0c;它们分别是项目范围、利益相关者管理、工作分解结构&#xff08;WBS&#xff09;、里程碑、风险管理、资源分配、关键路径法&#xff08;CPM&#xff09;、…

双向链表介绍

目录 1. 双向链表的结构 2. 双向链表的实现 初始化哨兵位&#xff1a; 打印链表&#xff1a; 尾插&#xff1a; 头插&#xff1a; 尾删&#xff1a; 头删&#xff1a; 查找&#xff1a; 在指定位置之后插入数据&#xff1a; 删除目标位置的数据&#xff1a; 销毁链…

星戈瑞Sulfo-Cyanine5-DBCO荧光标记的应用

Sulfo-Cyanine5-DBCO荧光标记化合物&#xff0c;它在生物科学和医学领域应用。由于它具有荧光信号和点击化学反应性&#xff0c;这使得它成为一种常见的标记工具&#xff0c;可用于追踪、标记和成像生物分子和细胞。 在生物医学研究中&#xff0c;Sulfo-Cyanine5-DBCO荧光标记常…

CAXA电子图版2020版 下载地址及安装教程

CAXA电子图板是一款由国内软件公司CAXA开发的专业CAD&#xff08;计算机辅助设计&#xff09;软件。它主要用于绘制和编辑各种类型的二维图纸和工程图纸&#xff0c;广泛应用于建筑、机械、电气和电子等行业。 CAXA电子图板具有以下主要功能和特点&#xff1a; 二维绘图&…

什么是自动化测试?深入了解其作用!

本文介绍了自动化测试的概念&#xff0c;以及为什么重要。自动化测试可以帮助你节省时间和金钱&#xff0c;并提高你的软件质量 自动化测试是指利用工具模拟人为操作&#xff0c;自动执行测试用例&#xff0c;并生成测试结果的过程。它是一种高效、准确、一致的测试方法&#…

C++手撕红黑树

文章目录 红黑树概念性质&#xff08;条件限制&#xff09;节点的定义红黑树的结构红黑树的插入cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u存在且为红cur为红&#xff0c;p为红&#xff0c;g为黑&#xff0c;u不存在或u为黑&#xff0c;插入到p对应的一边cur为红…

计算机视觉入门

1、引言 计算机视觉是一门研究如何让机器“看到”并理解世界的学科。它的目标是提取、分析和理解从某一源&#xff08;比如摄像头或者图像文件&#xff09;获得的图像数据&#xff0c;从而使计算机能够像人类一样对视觉信息进行理解。 定义得更具体一些&#xff0c;计算机视觉是…

02 _ 分布式系统的指标:啥是分布式的三围

你好&#xff0c;我是聂鹏程。 在上一篇文章中&#xff0c;通过对分布式发展历程的学习&#xff0c;我们对分布式技术有了一个整体印象。接下来&#xff0c;我们就再来看看可以用哪些指标去具体地衡量一个分布式系统。如果你已经对分布式系统的指标了解得很清楚了&#xff0c;…

群晖NAS使用Docker部署Potopea在线图片编辑工具并实现公网访问

文章目录 1. 部署Photopea2. 运行Photopea3. 群晖安装Cpolar4. 配置公网地址5. 公网访问测试6. 固定公网地址 本文主要介绍如何在群晖NAS使用Docker部署Potopea在线图片编辑工具&#xff0c;并结合cpolar内网穿透实现公网环境可以远程访问本地部署的Potopea. Photopea是一款强大…

第十五届蓝桥杯测试组模拟赛两期

文章目录 功能测试一期-场景法-登录功能一期-等价类-边界值-添加用户账号输入框一期-登录-缺陷报告一期- UI自动化测试一期-单元测试-路径覆盖二期-正交法-搜索条件组合二期-测试用例二期-缺陷报告二期-自动化测试二期-单元测试-基本路径覆盖 功能测试 一期-场景法-登录功能 …

【云呐】工单管理流程,工单管理怎么处理

工单创建  客户或内部员工在系统中创建工单。工单应包括以下信息&#xff1a;  问题的描述  工单的优先级和紧急程度  相关的客户或内部员工信息  工单的类型或类别  相关的附件或文件 工单分配  工单需要分配给适当的人员或团队来解决。分配过程可能涉及到以下步…

MySQL 优化总结

目标知识 MySQL执行流程图 MySQL 优化成本路线图 优化成本&#xff1a;硬件>系统配置>数据库表结构>SQL及索引。优化效果&#xff1a;硬件<系统配置<数据库表结构<SQL及索引。 MySQL 五大优化原则 减少数据返回&#xff1a;设置合理字段数据类型、启用压缩…

Spark, Storm, Flink简介

目录 1.Spark VS Storm2.Storm VS Flink 本文主要介绍Spark, Storm, Flink的区别。 1.Spark VS Storm Spark和Storm都是大数据处理框架&#xff0c;但它们在设计理念和使用场景上有一些区别&#xff1a; 实时性&#xff1a;Storm是一个实时计算框架&#xff0c;适合需要实时…

Vue-B站学习笔记

1. 路由配置 B站视频之Vue route文件下的index.js app.vue

js获取上周本周下周的日期(附Demo)

目录 前言1. 基本知识2. Demo3. 彩蛋 前言 现在的时间点是&#xff1a;2024-04-08&#xff0c;对应的日期如下&#xff08;上周、这周、下周&#xff09; 1. 基本知识 讲述Demo之前&#xff0c;先补充一些基础知识 JavaScript 中的 Date 对象是用于处理日期和时间的对象。它…

提问:一台交换机能带动多少个网络监控摄像头?

你们好&#xff0c;我的网工朋友。 标题的这个问题呢&#xff0c;其实有点问题的。因为这一个问题&#xff0c;需要有一堆条件加上&#xff0c;才好判断。 比如&#xff0c;你的交换机是百兆的还是千兆的&#xff1f; 整机的POE功率和端口POE功率是多少&#xff1f; 交换机…