责任编辑转贴自 https://juejin.cn/post/7213923957824979000
axios是两个如前所述Promise的HTTP应用领域程序，每星期的npm用户数4000W+，假如返回在10天前，promise式的允诺辅助工具是两个非常大的技术创新，它化解了允诺繁杂的问题，在那个操控性明确要求不所以高的年代虽说是一骑战到。但随著天数的流逝，Axios在合作开发工作效率和操控性各方面开始略有滞后，那时都早已是2023年了，直面日渐繁杂的市场需求，他们须要的是这款极具开拓性和领跑性的允诺辅助工具，而promise式的允诺辅助工具根本无法被称为现代了，假如你想保持在加速发展的最前沿，所以请继续写作。
具体来说我想新闻稿的是，我的确不是标题党，接下去我将通过曝露随著天数的流逝，axios在一些各方面表现的困难重重，并所推荐两个捷伊，较之axios极具现代和开拓性的允诺辅助工具给你，它就是轻量的允诺思路库alova
接下去他们看一看Promise式允诺辅助工具的软肋（axios）
1. 与React、Vue等架构错位
那时，React、Vue等后端UI架构对于后端来说几乎是不可缺少的，axios难以和这些架构的状况广度存取，须要合作开发人员另行保护它们，导致合作开发工作效率较高。
2. 在操控性各方面不无做为
2023年了，较之10天前的应用领域早已繁杂了不知几个量级，在允诺各方面明确要求也愈来愈高，来确保网页操控性的明确要求，axios在这各方面不无做为，比如在频密地多次重复允诺、同时发动数个相同允诺等情景。
3. 呆板的表面积
根据bundlephobia显示，axios的表面积在填充状况下为11+kb，看右图
image.png
4. 响应数据的Ts类型定义混乱
在使用axios时，你可能经常会这样写：
// 创建两个axios实例 const inst = axios.create({ baseURL: https://example.com/ }) // 在响应拦截器中返回datainst.interceptors.response.use(response => { if (response.status === 200) { return response.data } throw new Error(response.status) }) interface Resp { id: number } inst.get<Resp>(/xxx).then(result => { // result的类型总是为axios.AxiosResponse<Resp> data.data })不知道是axios故意为之还是忽略了，以上的发动的GET允诺中，响应数据result的类型总是axios.AxiosResponse<Resp>的，但其实他们在响应拦截器中早已将response.data返回了，这导致响应数据类型混乱而被困扰。
在alova中是如何化解的呢？
alova做为两个更加现代化，更加适应繁杂应用领域的允诺计划，也给出了它更加优雅的化解计划。同时为了降低给的学习成本，也保持了和axios相似的api设计，看起来就很熟悉有木有。
alova读作“阿洛娃”，虽然和axios一样都是以a开头，以下两个名称须要注意区分哦！
与UI架构广度融合，自动管理允诺相关数据
axios
<template> <div v-if=“loading”>Loading…</div> <div v-else-if=“error” class=“error”> {{ error.message }} </div> <div v-else>{{ data }}</div> </template> <script setup> import axios from axios; import { ref, onMounted } from vue; constloading = ref(false); const error = ref(null); const data = ref(null); const requestData = () =>{ loading.value =true; axios.get(http://xxx/index).then(result =>{ data.value = result; }).catch(e => { error.value = e; }).finally(() => { loading.value = false; }); } onMounted(requestData);</script>alova
<template> <div v-if=“loading”>Loading…</div> <div v-else-if=“error” class=“error”> {{ error.message }} </div> <div v-else>{{ data }}</div> </template> <script setup> import { createAlova, useRequest } from alova; const pageData = createAlova({ baseURL: http://xxx }).Get(/index); const { loading, data, error } = useRequest(pageData); </script>在axios中须要自己创建对应的请求状况并另行保护，而alova却帮你接管了这项工作
开箱即用的高操控性功能
现代Promise式的允诺辅助工具主要定位于通过Promise的方式简化允诺，而提高操控性可能是它们最不会考虑的一点，但做为允诺思路库的alova中却着重突出这一点，在alova中默认开启了内存缓存和允诺共享，这两项可以极大地提高允诺操控性，提升用户体验的同时还能降低服务端压力，让他们来一一了解下它们吧。
内存缓存
内存模式就是在允诺响应后将响应数据保存在本地内存中，当下次再发动完全相同允诺时就会使用缓存数据，而不会再次发送允诺，试想一下，当你在实现两个列表页，点击列表项可以进入详情页查看数据，你会想到用户可能会频密在列表中点击查看详情，当详情数据没有变化时，假如每一次进入详情页都要允诺一次未免也太浪费了，而且每次还须要用户等待加载。在alova中你可以默认享受到这样的待遇，以下展示下效果
screenshots.gif
允诺共享
你可能遇到过这种情况，当两个允诺发出但还未响应时，又发动了完全相同允诺，就造成了允诺浪费，或者多次重复提交问题，比如以下三种情景：
求；提交按钮未被禁用，用户点击了多次提交按钮；当预加载还未完成时进入了预加载网页，将会发动多次完全相同允诺；共享允诺就是用来化解这些问题的，它是通过复用允诺的方式来实现的，由于这种案例难以直观展示，就不展示了，有兴趣的小伙伴可以另行体验体验。
除此以外，自称是允诺思路库的alova还提供了特定情景下的允诺思路，他们将在下文中介绍，有兴趣的小伙伴请继续往下看。
轻量的表面积
填充状况下的alova只有4kb+，只有axios的30%+，看下面截图
image.png
链接在此
更加直观的响应数据TS类型
在axios中，你想要定义响应数据的类型真是会让人感到困惑，假如你是个Typescript的重度用户，alova可以给你提供完整的类型体验，当你在允诺处定义响应数据时的类型后，你可以在多处享受到它，会让你感觉很清晰，他们来看一看。
interface Resp { id: number } constpageData = createAlova({ baseURL:http://xxx }).Get<Resp>(/index); const { data, // data的类型为Resploading, error, onSuccess, send } = useRequest(pageData); onSuccess(event => { 的值类型也是Resp console.log(event.data); }); const handleClick = async () => { // send函数可以手动再次发送允诺，它将可以接收到响应数据，它的值类型还是Resp const data = await send(); }至此，较之现代的Promise式允诺库，你可能早已初步了解了alova的厉害。
但… 它的特性还远不止于此！
alova的其他特性
多UI架构同时支持
alova同时支持react、vue、svelte，无论你使用哪种UI架构，它都能满足你。
与axios相似的api设计，用起来更简单熟悉
alova的允诺信息构造几乎和axios完全相同，他们来对比一下它们的GET和POST允诺。
GET允诺
// axios axios.get(/index, { // 设置允诺头 headers: { Content-Type: application/json;charset=UTF-8 }, // params参数 params: { userId: 1 } }); // alova consttodoListGetter = alovaInstance.Get(/index, { // 设置允诺头 headers: { Content-Type: application/json;charset=UTF-8 }, // params参数 params: { userId: 1 } });POST允诺
// axios axios.post(/login, { username: xxx, password: ppp}, {// 设置允诺头 headers: { Content-Type: application/json;charset=UTF-8 }, // params参数 params: { userId: 1} });// alova const loginPoster = alovaInstance.Post(/login, { username: xxx, password: ppp}, {// 设置允诺头 headers: { Content-Type: application/json;charset=UTF-8 }, // params参数 params: { userId: 1} });（允诺思路）高操控性分页允诺思路
自动保护分页相关数据和状况，并提供了常用的分页数据操作能力，据官方介绍，可以让列表页流畅性提高300%，编码难度降低50%，以下是官方提供的示例，有兴趣的同学可以去看一看。
（允诺思路）无感数据交互
这个在我看来，这个无感数据交互允诺思路虽说是一大创举，我把它理解为更加可靠的乐观更新，官网是这样解释的：
无感数据交互是指用户在与应用领域进行交互时，无需等待即可立即展示相关内容，或者提交信息时也无需等待即可展示操作结果，就像和本地数据交互一样，从而大幅提升应用领域的流畅性，它让用户感知不到数据传输带来的卡顿。可以更高限度地降低网络波动带来的问题，你的应用领域在高延迟网络甚至是断网状况下依然可用。
在我的体验过程中，即使在弱网状况下，也可以让我感受到一种不无延迟带来的顺畅感，你也来感受下吧。
screenshots.gif
据我了解，它使用以下技术：
持久化的允诺队列来确保允诺的安全性和串联性；允诺重试思路机制，来确保允诺的顺利完成；虚拟响应数据（两个创捷伊概念），来做为未响应时的数据占位，以便在响应后定位它并替换为实际数据。数据预拉取
通过拉取数据的方式预先加载好数据并缓存在本地，当真正用到这部分数据时就可以命中缓存并直接显示数据，这种方式也极大地提升了用户体验。
写在最后
总之，alova做为两个新生代的允诺辅助工具，具有非常大的潜力，你也想试用的话，可以点击以下链接去了解。
更多所推荐
