记录--alova组件使用方法(区别axios)

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

在我们写项目代码时,应该更加专注于业务逻辑的实现,而把定式代码交给js库或工程化自动处理,而我想说的是,请求逻辑其实也是可以继续简化的。

你可能会说,用axios或fetch api就够了啊,哪有什么请求逻辑,那可能是你还没有意识到这个问题,作为一个前端开发,你肯定也遇到过这些问题:

  • 处理分页逻辑
  • 表单处理逻辑
  • 处理请求防抖逻辑
  • 处理轮询检查
  • 处理缓存处理
  • 处理加载状态
  • 处理错误处理
  • 验证码发送
  • 文件上传
  • ...

这些问题,如果你正在使用 axios 或 fetch api,你需要编写大量的代码来处理这些问题,但我想说,他们其实更多的也都是固定的模板代码,也可以被精简掉。

在今天你可以使用 alova 来处理它们,alova提供了大量日常业务中常用的请求模块,你只需要简单配置几行代码,alova 就能自动帮你管理请求状态,优化网络体验,那些烦人的分页逻辑、轮询检查、缓存处理,全都不用你操心了,让你更加专注于业务逻辑。

alova的学习成本更低

alova 借鉴了 axios 和ahooks-useRequest的设计,让大家更容易上手,学习成本更低。

alova 官网在这里。

alova 自从 2023 年 4 月份正式对外发布以来,在 Issues 和 Disscussion 中收到了来自世界各地的开发者积极参与的信息,深感荣幸。

如果你也喜欢 alovajs,请在Github 仓库中贡献一颗 star,这对我们非常重要。

有任何问题,你可以加入以下群聊咨询,也可以在github 仓库中发布 Discussions,如果遇到问题,也请在github 的 issues中提交,我们会在最快的时间解决。

  • 加入在 Discord 社区参与交流
  • 加入 QQ 频道社区参与交流

下面我们来看看如何通过简单配置,就能帮你解决各种复杂场景下的请求问题。

基础请求

基本的请求,适用于初始化信息,自带了请求相关的各种状态。

以 vue3 为例。

<template><div><div v-if="loading">loading...</div><div v-else-if="error">error: {{ error }}</div><div v-else><div><span>id: {{ data.title }}</span><span>title: {{ data.time }}</span></div></div></div>
</template><script setup>import { useRequest } from "alova";// 和axios相似的参数风格const todoDetail = alova.Get("/todo", {params: {id: 1,},});const {loading,data,error,onSuccess,onError,onComplete,send,abort,update,} = useRequest(todoDetail);onSuccess((event) => {console.log("success", event);});onError((event) => {console.log("error", event);});onComplete((event) => {console.log("complete", event);});
</script>

useRequest 会自动帮你管理 loading、data、error 等状态,不需要自己控制!

useRequest 详细文档

状态变化请求

在数据筛选、搜索等交互中,可以通过 useWatcher 来监听状态变化并发送请求,返回值也包含与 useRequest 相同的状态、事件函数、操作函数。

useWatcher(() => filterTodoList(page, keyword), [keyword, page], {debounce: [500, 0], // 请求级的防抖参数
});

它还有请求防抖、保证请求时序、过滤状态变化时是否发送请求等功能,超方便!

useWatcher 详细文档

预加载数据

可以用 useFetcher 预加载数据,不需要直接处理响应,但会更新相关状态:

const { fetching, error, fetch } = useFetcher();
fetch(todoDetail);

useFetcher 详细文档

分页请求

分页场景下,page、pageSize、pageCount、total 等等好多状态要自己维护,还要写一堆逻辑来判断何时应该发送请求!

如果用 alovajs 提供的分页 Hook,你就只需要这样:

const {// 加载状态loading,// 列表数据data,// 是否为最后一页// 下拉加载时可通过此参数判断是否还需要加载isLastPage,// 当前页码,改变此页码将自动触发请求page,// 每页数据条数pageSize,// 分页页数pageCount,// 总数据量total,
} = usePagination((page, pageSize) => queryStudents(page, pageSize));// 翻到上一页,page值更改后将自动发送请求
const handlePrevPage = () => {page.value--;
};// 翻到下一页,page值更改后将自动发送请求
const handleNextPage = () => {page.value++;
};// 更改每页数量,pageSize值更改后将自动发送请求
const handleSetPageSize = () => {pageSize.value = 20;
};

是不是清爽很多,节省了超多重复代码。

usePagination 详细文档

表单提交

表单处理也很头疼吧?alova 的 useForm 直接帮你搞定表单提交、表单草稿、自动重置表单项、多页共享数据啥的。

const {form,send: submitForm,updateForm,
} = useForm((formData) => submitData(formData), {initialForm: {title: "",content: "",time: "",},resetAfterSubmiting: true,
});

useForm 详细文档

验证码实现

别再自己做倒计时了,这有!

const { loading: sending, send: sendCaptcha } = useCaptcha(() => sendCaptcha(mobile),{initialCountdown: 60,}
);

useCaptcha 详细文档

文件上传策略

更简单的文件上传策略,支持对 base64、Blob、ArrayBuffer、Canvas 数据的自动识别和转换,还可以多文件同时上传、图片预览图生成

const {fileListloading,progress
} = useUploader(({ file, name }) => uploadFile(file, name), {limit: 3,accept: ['png', 'jpg', 'gif'],imageTempLink: true
});

useUploader 详细文档

自动重新拉取数据

可以在浏览器 tab 切换时拉取最新数据、浏览器聚焦时拉取最新数据、网络重连时拉取最新数据、轮询请求自动重新拉取数据,可以同时配置以上的一个或多个触发条件,也可以配置节流时间来防止短时间内触发多次请求,例如 1 秒内只允许触发一次。

useAutoRequest(todoDetail, {enablePolling: 2000,enableVisibility: true,enableFocus: true,enableNetwork: true,throttle: 1000
}

useAutoRequest 详细文档

跨组件请求策略

跨组件或模块触发请求相关操作,消除组件层级的限制,在任意组件中快速地触发任意请求的操作函数,例如,你可以某个组件中更新了菜单数据后,重新触发侧边菜单栏的重新请求,从而刷新数据。当操作了列表数据后,触发列表更新。

// 组件A创建代理
useRequest(todoDetail, {middleware: actionDelegationMiddleware("someAction"),
});// 组件B内触发操作
accessAction("someAction", (actions) => {actions.send();
});

actionDelegationMiddleware 详细文档

请求重试策略

在重要的请求上使用它,可以提高请求的稳定性,可以自定义设置是否重试,以及重试延迟,还有手动停止重试

const { onRetry, onFail, stop } = useRetriableRequest(pay, {retry(error) {return /network timeout/i.test(error.message);},backoff: {delay: 2000,},
});

useRetriableRequest 详细文档

SSE

可以直接通过 SSE 进行请求,它可以通过全局响应和方法实例的函数 transformData 自动转换数据,还提供了对 EventSource 对象的全部控制。

const { readyState, data, eventSource, onMessage, onError, onOpen, on } =useSSE(() => chatGPT(), {withCredentials: true,interceptByGlobalResponded: true,});

useSSE 详细文档

本文转载于:

https://juejin.cn/post/7301281320666693667

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

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

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

相关文章

【C++】使用std::vector()函数实现矩阵的加、减、点乘、点除等运算

本文通过vector&#xff08;&#xff09;函数表示矩阵的形式&#xff0c;对 加、减、点乘、点除等运算进行编码和运行&#xff0c;相应结果如下文所述。 #include <iostream> #include <vector>using namespace std;// 矩阵加法 vector<vector<int>> …

万字长文 - Python 日志记录器logging 百科全书 - 高级配置之 日志分层

万字长文 - Python 日志记录器logging 百科全书 - 高级配置之 日志分层 前言 在 Python 的logging模块中&#xff0c;它不仅提供了基础的日志功能&#xff0c;还拥有一系列高级配置选项来满足复杂应用的日志管理需求。 说到logging 模块的高级配置&#xff0c;必须提及日志分…

Linux latin1字符集转成UTF-8

latin1字符集&#xff0c;我用命令iconv转换后依旧乱码&#xff0c;但是本地用Notepad转成utf-8再入库数据&#xff0c;却是正常的 查看文件编码 vi WeakcoverReason_20231120.csv:set fileencoding使用编码转换命令&#xff0c;将latin1改成UTF-8 iconv -f latin1 -t UTF-8 W…

初始环境配置

目录 一、JDK1、简介2、配置步骤 二、Redis1、简介2、配置步骤 三、MySQL1、简介2、配置步骤 四、Git1、简介2、配置步骤 五、NodeJS1、简介2、配置步骤 六、Maven1、简介2、配置步骤 七、Tomcat1、简介2、配置步骤 一、JDK 1、简介 JDK 是 Oracle 提供的 Java 开发工具包&…

linux rsyslog综合实战1

本次我们通过rsyslog服务将A节点服务器上的单个日志(Path:/var/log/245-1.log)实时同步到B节点服务器目录下(Path:/opt/rsyslog/245) 1.rsyslog架构 2.环境信息 环境信息 HostnameIpAddressOS versionModuleNotersyslog1192.168.10.245CentOS Linux release 7.9.2009 (Core)rs…

类与对象(上篇)

前言 在之前我们学的C入门主要是为现在学习类与对象打基础&#xff0c;今天我们才算真正开始学习C了。因为类与对象的知识点比较多&#xff0c;所以我们将它分为三部分讲解&#xff0c;今天我们学习类与对象的上篇。 一、面向过程和面向对象的初步认识 1、面向过程 面向过程顾…

[github初学者教程] 分支管理-以及问题解决

作者&#xff1a;20岁爱吃必胜客&#xff08;坤制作人&#xff09;&#xff0c;近十年开发经验, 跨域学习者&#xff0c;目前于新西兰奥克兰大学攻读IT硕士学位。荣誉&#xff1a;阿里云博客专家认证、腾讯开发者社区优质创作者&#xff0c;在CTF省赛校赛多次取得好成绩。跨领域…

工作记录---为什么双11当天不能申请退款?(有趣~)

为什么&#xff1f; 服务降级了 服务降级&#xff1a; 当服务器压力剧增的情况下&#xff0c;根据实际业务情况及流量&#xff0c;对一些服务和页面有策略的不处理或换种简单的方式处理&#xff0c;从而释放服务器资源以保证核心交易正常运作或高效运作。 分布式系统的降级…

用Java实现贪吃蛇小游戏

一、创建新项目 首先创建一个新的项目&#xff0c;并命名为贪吃蛇。 其次在贪吃蛇项目下创建一个名为images的文件夹用来存放游戏相关图片。 然后再在项目的src文件下创建一个com.xxx.view的包用来存放所有的图形界面类&#xff0c;创建一个com.xxx.controller的包用来存放启…

基于AVR单片机的心电信号获取与分析

基于AVR单片机的心电信号获取与分析是一项常见的生物医学工程应用&#xff0c;用于监测和分析人体的心脏活动。本文将介绍基于AVR单片机的心电信号获取与分析的原理和设计&#xff0c;并提供相应的代码示例。 1. 概述 心电信号是记录和分析心脏电活动的重要手段。AVR单片机是…

mysql 中with的用法(3)

有表&#xff08;tb&#xff09;,数据如下&#xff1a; 请用SQL,生成如下的样式&#xff1a; 一、建表 CREATE TABLE tb (id varchar(3) DEFAULT NULL,pid varchar(3) DEFAULT NULL,name varchar(64) DEFAULT NULL ) INSERT INTO tb (id, pid, name) VALUES(002, 0, 浙江省)…

docker更换国内源

docker更换国内源 1、编辑Docker配置文件 在终端中执行以下命令&#xff0c;编辑Docker配置文件&#xff1a; vi /etc/docker/daemon.json2、添加更新源 在打开的配置文件中&#xff0c;添加以下内容&#xff1a; {"registry-mirrors": ["https://hub-mirror…

Chrome中设置安全来源域名

目的&#xff1a; 使得本地映射的域名能被浏览器安全访问&#xff0c;允许调用设备资源 步骤&#xff1a; 在Chrome中导航栏打开 chrome://flags/#unsafely-treat-insecure-origin-as-secure 填入hosts域名&#xff1a;如 http://h5-twzc003.local.com 参考&#xff1a; h…

赴日开发工程师是做什么的?

日本的软件开发岗位对技术要求和沟通能力都有较高的要求&#xff0c;赴日开发工程师主要负责软件设计、开发和测试&#xff0c;包括编写代码、测试代码和修复漏洞等工作。开发人员必须对软件架构、设计模式和业务逻辑有深入的理解&#xff0c;并能做出合适的技术决策。 当然&a…

时间序列与 Statsmodels:预测所需的基本概念(1)

后文&#xff1a;时间序列与 statsmodels&#xff1a;预测所需的基本概念&#xff08;2&#xff09;-CSDN博客 一、说明 本博客解释了理解时间序列的基本概念&#xff1a;趋势、季节性、白噪声、平稳性&#xff0c;并使用自回归、差分和移动平均参数进行预测示例。这是理解任何…

江湖再见,机器视觉兄弟们,我已经提离职了,聪明的机器视觉工程师,离职不亏本!

我闻江湖已叹息&#xff0c;又闻人间繁闹闹。同为布衣沦落人&#xff0c;相逢何必曾相识。 此生谁料事事休&#xff0c;道不尽人情冷暖&#xff0c;聚散离合总平常&#xff0c;不似勇气少年时。 我估计今年公司年底是发不出工资了&#xff0c;因为订单续不上。年终奖更是没有&…

Android 弹出自定义对话框

Android在任意Activity界面弹出一个自定义的对话框&#xff0c;效果如下图所示: 准备一张小图片&#xff0c;右上角的小X图标64*64&#xff0c;close_icon.png&#xff0c;随便找个小图片代替&#xff1b; 第一步&#xff1a;样式添加&#xff0c;注意&#xff1a;默认在value…

通过微软MediaCreationTool制作Win10系统安装U盘,安装纯净版Win10的通用教程

最近新入手了一台Lenovo的入门级主机。 为了避免以后忘记装机步骤&#xff0c;特写下此博客记录。 装机步骤是在Lenovo网站上看的&#xff0c;在这表示感谢。 https://iknow.lenovo.com.cn/detail/177365

(十二)Flask重点之session

session 自我介绍&基本使用&#xff1a; 在Flask中&#xff0c;Session是一种用于在客户端和服务器之间存储和传输数据的机制。它允许您在用户与应用程序之间保持状态&#xff0c;并且可以存储和检索有关特定用户的信息。 Flask使用Werkzeug库提供的SecureCookie来实现S…

LangChain 4用向量数据库Faiss存储,读取YouTube的视频文本搜索Indexes for information retrieve

接着前面的Langchain&#xff0c;继续实现读取YouTube的视频脚本来问答Indexes for information retrieve LangChain 实现给动物取名字&#xff0c;LangChain 2模块化prompt template并用streamlit生成网站 实现给动物取名字LangChain 3使用Agent访问Wikipedia和llm-math计算狗…