是时候取代您的Axios了
#javascript #react #vue #axios

Axios是一个基于承诺的HTTP客户端，每周下载量为4000万+。如果我们回到10年前，那么Promise Style的请求工具是一项巨大的创新。它解决了繁琐的请求问题。可以说不那么高的年龄是最好的。但是随着时间的流逝，Axios在发展效率和绩效方面开始落后。现在是2023年。面对越来越复杂的要求，我们需要的是一种更具创新性和领先的请求工具，如果您想留在快速发展的最前沿，请继续阅读。

首先，我想声明我真的不是头条聚会。接下来，随着时间的流逝，我将在某些方面揭露Axios的无能为力，并推荐一种新的，它比Axios更现代和创新。请求工具适合您，它是lightweight request strategy library alova

接下来，让我们看一下承诺风格的请求工具（AXIOS）的弱点

1.与诸如React和Vue之类的框架分开

现在，前端和VUE等前端UI框架对于前端几乎是必不可少的。 Axios不能与这些框架的状态深入绑定，开发人员需要自己维护，从而导致开发效率低。

2.在绩效方面什么也不做

是2023年，该应用程序已经比10年前的应用程序更为复杂，并且请求的要求越来越高，以确保页面的性能要求。 Axios在这方面什么都不做，例如频繁重复请求，同时启动多个相同的请求，等等。

3.肿的体积

根据Bundlephobia，压缩状态的Axios体积为11+Kb，请参见下图

image.png

link here

4.响应数据的TS类型定义令人困惑

使用Axios时，您通常可以这样写：

// Create an axios instance
const inst = axios. create({
   baseURL: 'https://example.com/'
})

// return data in the response interceptor
inst.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 => {
   // The type of result is always axios.AxiosResponse<Resp>
   data.data
})

我不知道Axios是故意的还是忽略了它。在上面启动的get请求中，响应数据的类型result始终是axios.AxiosResponse<Resp>，但是实际上，我们已经返回了response in the response interceptor .data，这导致响应数据类型被混淆。

它如何在阿洛娃解决？

作为一种更现代，更适合适应的复杂应用程序的请求解决方案，Alova还提供了更优雅的解决方案。同时，为了降低学习成本，还保持了类似于Axios的API设计，看起来非常熟悉。

Alova被发音为“ Alova”。尽管它以类似的轴开始，但需要区分以下两个名称！

与UI框架深入集成，自动管理请求相关数据

假设我们需要启动基本的数据采集请求，以VUE为例，然后直接比较代码。

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';

const loading = 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为您接管了这项工作

开箱即用的高性能功能

传统的承诺式请求工具主要是通过承诺来简化请求的定位，而提高绩效可能是其考虑的最少。但是，Alova是一个请求策略库，强调了这一点。在Alova中，默认情况下启用内存。缓存和请求共享，这两个可以大大提高请求性能，改善用户体验并减少服务器压力，让我们一个一个一个一个。

内存缓存

内存模式是在响应请求后将响应数据保存在本地内存中。下次提出相同的请求时，将使用缓存的数据，而不是再次发送请求。想象一下，当您实现列表页面时，单击列表项，您可以输入详细信息页面以查看数据。您可能会认为用户可能会经常单击以查看列表中的详细信息。当详细信息数据没有更改时，每次输入详细信息页面时，每次需要用户等待加载时，都无法浪费。在Alova，您默认可以享受这种治疗，效果如下所示

screenshots.gif

请求共享

您可能遇到了这种情况。当发送请求但尚未回复请求时，再次启动了相同的请求，导致浪费请求或重复提交问题，例如以下三种情况：

  1. 当组件创建时，组件将获取初始化数据。当页面同时呈现多个组件时，它将同时发送多个相同的请求;
  2. 提交按钮未禁用，用户多次单击“提交”按钮;
  3. 在预加载之前输入预加载页面时，将多次启动相同的请求；

共享请求用于解决这些问题。它是通过多路复用请求实现的。由于这种情况无法直观地显示，因此不会显示。有兴趣的合作伙伴可以自己体验。

此外，声称自己是请求策略库的Alova还提供了在特定方案中的请求策略，我们将在下面介绍。有兴趣的合作伙伴，请继续阅读。

轻巧的尺寸

压缩状态下的

alova仅为4KB+，仅为30％+的轴，请参见下面的屏幕截图

image.png

Link here

更直观的响应数据TS类型

在Axios中，您要定义响应数据的类型确实令人困惑。如果您是Typescript的大量用户，Alova可以为您提供完整的类型体验。当您根据请求定义响应数据的类型时，您可以在多个地方享受它，它会让您感到非常清楚，让我们看看。

interface Resp {
   id: number
}
const pageData = createAlova({ baseURL: 'http://xxx' }). Get<Resp>('/index');
const {
   data, // data type is Resp
   loading, error, onSuccess, send
} = useRequest(pageData);
onSuccess(event => {
   // When getting the response data in the success callback, the value type of event.data is also Resp
   console.log(event.data);
});

const handleClick = async () => {
   // The send function can manually send the request again, it will receive the response data, and its value type is still Resp
   const data = await send();
}

到目前为止，与传统的承诺式请求库相比，您可能对Alova的力量有初步的了解。

，但是...它比那更多！

阿洛娃的其他功能

同时支持多个UI框架

Alova同时支持React，Vue和Svelte，无论您使用哪种UI框架，都可以满足您的需求。

API设计类似于Axios，易于使用和熟悉

Alova的请求信息结构几乎与Axios相同。让我们比较他们的获取和发布请求。

获取请求 

// axios
axios.get('/index', {
   // set request header
   headers: {
     'Content-Type': 'application/json;charset=UTF-8'
   },
   // params parameter
   params: {
     userId: 1
   }
});

// alova
const todoListGetter = alovaInstance. Get('/index', {
   // set request header
   headers: {
     'Content-Type': 'application/json;charset=UTF-8'
   },
   // params parameter
   params: {
     userId: 1
   }
});

发布请求 

// axios
axios. post('/login', {
   username: 'xxx',
   password: 'ppp'
}, {
   // set request header
   headers: {
     'Content-Type': 'application/json;charset=UTF-8'
   },
   // params parameter
   params: {
     userId: 1
   }
});

// alova
const loginPoster = alovaInstance. Post('/login', {
   username: 'xxx',
   password: 'ppp'
}, {
   // set request header
   headers: {
     'Content-Type': 'application/json;charset=UTF-8'
   },
   // params parameter
   params: {
     userId: 1
   }
});

（请求策略）高性能分页请求策略

自动维护与分页相关的数据和状态，并提供常见的分页数据操作功能。根据官方介绍，它可以提高列表页面的流利度300％，并将编码难度减少50％。以下是官员提供的示例。有兴趣的学生可以去看。

Example of paginated list

Example of pull-down loading

（请求策略）非电感数据交互

我认为，这种非电感数据交互请求策略可以描述为一项伟大的倡议。我理解这是一个更可靠的乐观更新。官方网站这样解释：

非电感数据互动意味着，当用户与应用程序交互时，可以立即显示相关内容而无需等待，或者可以在不等待信息时显示操作结果，就像与本地数据进行交互一样，这大大改善了申请经验。流利的是，它允许用户不感知数据传输引起的滞后。它可以最大程度地减少网络波动引起的问题，并且您的应用程序仍然可以在高延迟网络甚至断开连接的网络上获得。

在我的经验中，即使在弱网络状态下，我也会感觉到平稳的感觉，因此请过来体验它。

screenshots.gif

据我了解，

使用以下技术：

  1. 持续的请求队列，以确保请求的安全性和序列化;
  2. 请求重试政策机制，以确保请求的平稳完成;
  3. 虚拟响应数据（一种创新的概念）作为无反应数据的占位符，以便在响应后将其定位并替换为实际数据。

可以在official website

上找到有关传感器数据交互的更多具体信息。

数据预取

通过拉动数据并在本地缓存来预加载数据。当实际使用数据的这一部分时，它可以击中缓存并直接显示数据。此方法还大大改善了用户体验。

最后写

简而言之，作为新一代的请求工具，Alova具有巨大的潜力。如果您想尝试一下，可以单击下面的链接以了解更多信息。

alova official website

alova's Github address

写作并不容易，我已经看到了，为什么不为我订购一颗自由的心！呢呢谢谢您的喜欢。