改變axios的用法后，我的工作效率提升了3倍

作者：古韻

原文：https://juejin.cn/post/7277029942298329125

實(shí)際場(chǎng)景下的請(qǐng)求問題

作為前端開發(fā)，網(wǎng)絡(luò)請(qǐng)求肯定是我們經(jīng)常要面對(duì)的事情，在前端請(qǐng)求中，axios和fetch API應(yīng)該是我們最常用的請(qǐng)求工具了，它們?cè)诎l(fā)送請(qǐng)求和接收響應(yīng)數(shù)據(jù)已經(jīng)做到了足夠簡(jiǎn)單。

但在實(shí)際項(xiàng)目中，為了達(dá)到更好的用戶體驗(yàn)，我們還需要考慮下面這幾個(gè)因素：

1. 展示加載中的請(qǐng)求狀態(tài)
2. 展示請(qǐng)求錯(cuò)誤狀態(tài)
3. 展示上傳/下載文件的進(jìn)度信息

上面這些都需要我們編寫額外的代碼，增加了不少的工作量，你的請(qǐng)求代碼可能是下面這樣的，我們以vue3代碼為示例。

js
復(fù)制代碼
const loading = ref(false);  
const data = ref({});  
const error = ref(null);  
const request = async () => { 
  try {  
    loading.value = true;  
    data.value = await axios.get('/xxx');  
  } catch (e) {  
    error.value = e;  
  }
  loading.value = false;  
};
onMounted(request);

如果面對(duì)大量的api，這工作量可想而知，想到這時(shí)就有點(diǎn)頭疼啊。有沒有一種方法可以自動(dòng)幫我處理這些邏輯，讓請(qǐng)求代碼看起來更簡(jiǎn)潔呢？

解決

我們可以用封裝的思路，把上面這些都封裝為一個(gè)簡(jiǎn)單的use hook，就可以很好地解決了，封裝后的代碼大概是下面這樣的。

export const useRequest = (url) => {
  const loading = ref(false);
  const data = ref({});
  const error = ref(null);
  const request = async () => {
    try {
      loading.value = true;
      data.value = await axios.get(url);
    } catch (e) {
      error.value = e;
    }
    loading.value = false;
  }
  onMounted(request);

  return {
    loading,
    data,
    error
  };
}

這是一個(gè)最簡(jiǎn)單的use hook實(shí)現(xiàn)，它幫我們解決了請(qǐng)求模板代碼的問題。當(dāng)然你還可以使用use hook封裝更多更高級(jí)的請(qǐng)求功能，而這些功能現(xiàn)在不必你自己封裝了，使用alova^[1]就可以了。

alova 是一個(gè)輕量級(jí)的請(qǐng)求策略庫，針對(duì)分頁請(qǐng)求、表單提交、上傳和下載文件等不同請(qǐng)求場(chǎng)景使用對(duì)應(yīng)的請(qǐng)求模塊，讓開發(fā)者使用非常少量的代碼就可以實(shí)現(xiàn)高可用性和高流暢性的請(qǐng)求功能，這意味著，你再也不需要自己絞盡腦汁編寫請(qǐng)求優(yōu)化代碼，再也不需要自己維護(hù)請(qǐng)求數(shù)據(jù)和相關(guān)狀態(tài)，你只需要選擇并使用請(qǐng)求模塊，設(shè)置參數(shù)后，alova 幫你搞定！

在引入alova后，我的工作效率直接提高了3倍，強(qiáng)烈推薦給大家。

你可以將alova理解成是axios或fetch-api等請(qǐng)求工具的一種武器裝備，將alova與請(qǐng)求工具配合使用將會(huì)讓它們變得更加強(qiáng)大。

其實(shí)，alova底層依然依賴axios或fetch-api等請(qǐng)求函數(shù)進(jìn)行請(qǐng)求，因此你仍然可以使用你喜歡的請(qǐng)求庫。

以下是一個(gè)基于vue3+axios+alova的使用示例，alova將自動(dòng)為你創(chuàng)建請(qǐng)求相關(guān)的，可以直接用于視圖的響應(yīng)式狀態(tài)，代碼如下：

可運(yùn)行的示例點(diǎn)此去查看^[2]

<template>
  <div v-if="loading">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <span v-else>responseData: {{ data }}</span>
</template>

<script setup>
import { createAlova, useRequest } from 'alova';
import VueHook from 'alova/vue';
import { axiosRequestAdapter } from '@alova/adapter-axios';

const alovaInstance = createAlova({
  statesHook: VueHook,

  // 設(shè)置使用axios作為請(qǐng)求工具
  requestAdapter: axiosRequestAdapter()
});

const {
  // 加載狀態(tài)
  loading,

  // 響應(yīng)數(shù)據(jù)
  data,

  // 錯(cuò)誤信息，請(qǐng)求錯(cuò)誤時(shí)才有值
  error
} = useRequest(alovaInstance.Get('/todoList'));
</script>

是不是非常nice！！！之前需要我們自己實(shí)現(xiàn)的各種功能，alova 都幫我們做了。

alova在過去3個(gè)月對(duì)外發(fā)布以來在github上已收到了 1500+star，我們需要您寶貴的star支持^[3]。

目前，alova已經(jīng)創(chuàng)新性地實(shí)現(xiàn)了在vue options中完美使用，也就是在vue2 options寫法中也可以使用use hook了，感興趣請(qǐng)移步查看^[4]。

總結(jié)

alova目前提供了8種請(qǐng)求策略，如果你希望在不同的請(qǐng)求場(chǎng)景下方便地實(shí)現(xiàn)特定的請(qǐng)求需求，那千萬別錯(cuò)過它哦。alova 還提供了緩存管理、請(qǐng)求共享等更多功能，可以覆蓋絕大多數(shù)請(qǐng)求場(chǎng)景。

所以，在你的下一個(gè)項(xiàng)目中，你也可以來試試 alova，一定能給你帶來更愉快的開發(fā)體驗(yàn)!

結(jié)尾

同學(xué)，要是覺得對(duì)你有用請(qǐng)幫忙點(diǎn)個(gè)贊或收藏！

相關(guān)信息

alova官網(wǎng)^[5]

alova Github地址^[6]

參考資料