axios的替换方案的思考和实践

原文来源于：程序员成长指北
  如有侵权，联系删除
  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时，你大概经常会如许写：

1. // 创建一个axios实例
2. const inst = axios.create({
3.   baseURL: 'https://example.com/'
4. })
6. // 在响应拦截器中返回data
7. inst.interceptors.response.use(response => {
8.   if (response.status === 200) {
9.     return response.data
10.   }
11.   throw new Error(response.status)
12. })
14. interface Resp {
15.   id: number
16. }
17. inst.get<Resp>('/xxx').then(result => {
18.   // result的类型总是为axios.AxiosResponse<Resp>
19.   data.data
20. })

复制代码

不知道是axios故意为之照旧忽略了，以上的发起的GET请求中，响应数据result的类型总是axios.AxiosResponse<Resp>的，但实在我们在响应拦截器中已经将response.data返回了，这导致响应数据类型混乱而被困扰。
在alova中是如何办理的呢？

alova作为一个更加今世化，更加适应复杂应用的请求方案，也给出了它更加优雅的办理方案。同时为了降低给的学习成本，也保持了和axios相似的api设计，看起来就很熟悉有木有。
   alova读作“阿洛娃”，固然和axios一样都是以a开头，以下两个名称需要注意区分哦！
  与UI框架深度融合，主动管理请求相干数据

假设我们需要发起一个基本的数据获取请求，以vue为例，直接上对比代码。
axios

1. <template>
2.   <div v-if="loading">Loading...</div>
3.   <div v-else-if="error" class="error">
4.     {{ error.message }}
5.   </div>
6.   <div v-else>{{ data }}</div>
7. </template>
9. <script setup>
10. import axios from 'axios';
11. import { ref, onMounted } from 'vue';
13. const loading = ref(false);
14. const error = ref(null);
15. const data = ref(null);
17. const requestData = () => {
18.   loading.value = true;
19.   axios.get('http://xxx/index').then(result => {
20.     data.value = result;
21.   }).catch(e => {
22.     error.value = e;
23.   }).finally(() => {
24.     loading.value = false;
25.   });
26. }
27. onMounted(requestData);
28. </script>

复制代码

alova

1. <template>
2.   <div v-if="loading">Loading...</div>
3.   <div v-else-if="error" class="error">
4.     {{ error.message }}
5.   </div>
6.   <div v-else>{{ data }}</div>
7. </template>
9. <script setup>
10. import { createAlova, useRequest } from 'alova';
12. const pageData = createAlova({ baseURL: 'http://xxx' }).Get('/index');
13. const { loading, data, error } = useRequest(pageData);
14. </script>

复制代码

在axios中需要自己创建对应的请求状态并自行维护，而alova却帮你接管了这项工作
开箱即用的高性能功能

传统Promise式的请求工具紧张定位于通过Promise的方式简化请求，而提高性能大概是它们最不会思量的一点，但作为请求计谋库的alova中却偏重突出这一点，在alova中默认开启了内存缓存和请求共享，这两项可以极大地提高请求性能，提拔用户体验的同时还能降低服务端压力，让我们来一一了解下它们吧。
内存缓存
内存模式就是在请求响应后将响应数据保存在本地内存中，当下次再发起相同请求时就会利用缓存数据，而不会再次发送请求，试想一下，当你在实现一个列表页，点击列表项可以进入详情页查察数据，你会想到用户大概会频仍在列表中点击查察详情，当详情数据没有变化时，如果每一次进入详情页都要请求一次未免也太浪费了，而且每次还需要用户等候加载。在alova中你可以默认享受到如许的报酬，以下展示下效果

screenshots.gif
请求共享
你大概遇到过这种情况，当一个请求发出但还未响应时，又发起了相同请求，就造成了请求浪费，或者重复提交问题，例如以下三种场景：

• 一个组件在创建时会获取初始化数据，当一个页面同时渲染多个此组件时，将会同时发出多次相同请求；
  
• 提交按钮未被禁用，用户点击了多次提交按钮；
  
• 当预加载还未完成时进入了预加载页面，将会发起多次相同请求；
  

共享请求就是用来办理这些问题的，它是通过复用请求的方式来实现的，由于这种案例无法直观展示，就不展示了，有兴趣的小搭档可以自行体验体验。
   除此以外，自称是请求计谋库的alova还提供了特定场景下的请求计谋，我们将在下文中先容，有兴趣的小搭档请继承往下看。
  轻量级的体积

压缩状态下的alova只有4kb+，只有axios的30%+，看下面截图

image.png
链接在此
更加直观的响应数据TS类型

在axios中，你想要定义响应数据的类型真是会让人感到困惑，如果你是个Typescript的重度用户，alova可以给你提供完整的类型体验，当你在请求处定义响应数据时的类型后，你可以在多处享受到它，会让你感觉很清晰，我们来看看。

1. interface Resp {
2.   id: number
3. }
4. const pageData = createAlova({ baseURL: 'http://xxx' }).Get<Resp>('/index');
5. const {
6.   data,  // data的类型为Resp
7.   loading, error, onSuccess, send
8. } = useRequest(pageData);
9. onSuccess(event => {
10.   // 在成功回调中获取响应数据时，event.data的值类型也是Resp
11.   console.log(event.data);
12. });
14. const handleClick = async () => {
15.   // send函数可以手动再次发送请求，它将可以接收到响应数据，它的值类型还是Resp
16.   const data = await send();
17. }

复制代码

至此，相比传统的Promise式请求库，你大概已经开端了解了alova的锋利。
但... 它的特性还远不止于此！
alova的其他特性

多UI框架同时支持

alova同时支持react、vue、svelte，无论你利用哪种UI框架，它都能满意你。
与axios相似的api设计，用起来更简朴熟悉

alova的请求信息构造几乎和axios相同，我们来对比一下它们的GET和POST请求。
GET请求

1. // axios
2. axios.get('/index', {
3.   // 设置请求头
4.   headers: {
5.     'Content-Type': 'application/json;charset=UTF-8'
6.   },
7.   // params参数
8.   params: {
9.     userId: 1
10.   }
11. });
13. // alova
14. const todoListGetter = alovaInstance.Get('/index', {
15.   // 设置请求头
16.   headers: {
17.     'Content-Type': 'application/json;charset=UTF-8'
18.   },
19.   // params参数
20.   params: {
21.     userId: 1
22.   }
23. });

复制代码

POST请求

1. // axios
2. axios.post('/login', {
3.   username: 'xxx',
4.   password: 'ppp'
5. }, {
6.   // 设置请求头
7.   headers: {
8.     'Content-Type': 'application/json;charset=UTF-8'
9.   },
10.   // params参数
11.   params: {
12.     userId: 1
13.   }
14. });
16. // alova
17. const loginPoster = alovaInstance.Post('/login', {
18.   username: 'xxx',
19.   password: 'ppp'
20. }, {
21.   // 设置请求头
22.   headers: {
23.     'Content-Type': 'application/json;charset=UTF-8'
24.   },
25.   // params参数
26.   params: {
27.     userId: 1
28.   }
29. });

复制代码

（请求计谋）高性能分页请求计谋

主动维护分页相干数据和状态，并提供了常用的分页数据操作能力，据官方先容，可以让列表页流畅性提高300%，编码难度降低50%，以下是官方提供的示例，有兴趣的同学可以去看看。
分页列表示例
下拉加载示例
（请求计谋）无感数据交互

这个在我看来，这个无感数据交互请求计谋可谓是一大创举，我把它理解为更加可靠的乐观更新，官网是如许表明的：
   无感数据交互是指用户在与应用进行交互时，无需等候即可立即展示相干内容，或者提交信息时也无需等候即可展示操作效果，就像和本地数据交互一样，从而大幅提拔应用的流畅性，它让用户感知不到数据传输带来的卡顿。可以更高限度地降低网络颠簸带来的问题，你的应用在高延迟网络甚至是断网状态下依然可用。
  在我的体验过程中，即使在弱网状态下，也可以让我感受到一种毫无延迟带来的顺畅感，你也来感受下吧。

screenshots.gif
据我了解，它利用以下技能：

• 长期化的请求队列来包管请求的安全性和串联性；
  
• 请求重试计谋机制，来包管请求的顺利完成；
  
• 虚拟响应数据（一个创新的概念），来作为未响应时的数据占位，以便在响应后定位它并替换为现实数据。
  

关于无感数据交互更详细的可以在官网了解~
数据预拉取

通过拉取数据的方式预先加载好数据并缓存在本地，认真正用到这部分数据时就可以掷中缓存并直接显示数据，这种方式也极大地提拔了用户体验。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。