网站维护需要什么,深圳罗湖做网站的公司哪家好,常用的设计网站有哪些,江苏省工程造价信息网这里给大家分享我在网上总结出来的一些知识#xff0c;希望对大家有所帮助 在我们写项目代码时#xff0c;应该更加专注于业务逻辑的实现#xff0c;而把定式代码交给js库或工程化自动处理#xff0c;而我想说的是#xff0c;请求逻辑其实也是可以继续简化的。 你可能会说… 这里给大家分享我在网上总结出来的一些知识希望对大家有所帮助 在我们写项目代码时应该更加专注于业务逻辑的实现而把定式代码交给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 为例。 templatedivdiv v-ifloadingloading.../divdiv v-else-iferrorerror: {{ error }}/divdiv v-elsedivspanid: {{ data.title }}/spanspantitle: {{ data.time }}/span/div/div/div
/templatescript setupimport { 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);});
/scriptuseRequest 会自动帮你管理 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 如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
