在我們寫項目代碼時，應(yīng)該更加專注于業(yè)務(wù)邏輯的實現(xiàn)，而把定式代碼交給js庫或工程化自動處理，而我想說的是，請求邏輯其實也是可以繼續(xù)簡化的。

你可能會說，用axios或fetch api就夠了啊，哪有什么請求邏輯，那可能是你還沒有意識到這個問題，作為一個前端開發(fā)，你肯定也遇到過這些問題：

• 處理分頁邏輯
• 表單處理邏輯
• 處理請求防抖邏輯
• 處理輪詢檢查
• 處理緩存處理
• 處理加載狀態(tài)
• 處理錯誤處理
• 驗證碼發(fā)送
• 文件上傳
• ...

這些問題，如果你正在使用 axios 或 fetch api，你需要編寫大量的代碼來處理這些問題，但我想說，他們其實更多的也都是固定的模板代碼，也可以被精簡掉。

在今天你可以使用 alova 來處理它們，alova提供了大量日常業(yè)務(wù)中常用的請求模塊，你只需要簡單配置幾行代碼，alova 就能自動幫你管理請求狀態(tài)，優(yōu)化網(wǎng)絡(luò)體驗，那些煩人的分頁邏輯、輪詢檢查、緩存處理，全都不用你操心了，讓你更加專注于業(yè)務(wù)邏輯。

alova的學(xué)習(xí)成本更低

alova 借鑒了 axios 和ahooks-useRequest的設(shè)計，讓大家更容易上手，學(xué)習(xí)成本更低。

alova 官網(wǎng)在這里。

alova 自從 2023 年 4 月份正式對外發(fā)布以來，在 Issues 和 Disscussion 中收到了來自世界各地的開發(fā)者積極參與的信息，深感榮幸。

如果你也喜歡 alovajs，請在Github 倉庫中貢獻(xiàn)一顆 star，這對我們非常重要。

有任何問題，你可以加入以下群聊咨詢，也可以在github 倉庫中發(fā)布 Discussions，如果遇到問題，也請在github 的 issues中提交，我們會在最快的時間解決。

• 加入在 Discord 社區(qū)參與交流
• 加入 QQ 頻道社區(qū)參與交流

下面我們來看看如何通過簡單配置，就能幫你解決各種復(fù)雜場景下的請求問題。

基礎(chǔ)請求

基本的請求，適用于初始化信息，自帶了請求相關(guān)的各種狀態(tài)。

以 vue3 為例。

<template>
  <div>
    <div v-if="loading">loading...</div>
    <div v-else-if="error">error: {{ error }}</div>
    <div v-else>
      <div>
        <span>id: {{ data.title }}</span>
        <span>title: {{ data.time }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { useRequest } from "alova";

  // 和axios相似的參數(shù)風(fēng)格
  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);
  });
</script>

useWatcher(() => filterTodoList(page, keyword), [keyword, page], {
  debounce: [500, 0], // 請求級的防抖參數(shù)
});

它還有請求防抖、保證請求時序、過濾狀態(tài)變化時是否發(fā)送請求等功能，超方便！

useWatcher 詳細(xì)文檔

預(yù)加載數(shù)據(jù)

可以用 useFetcher 預(yù)加載數(shù)據(jù),不需要直接處理響應(yīng),但會更新相關(guān)狀態(tài):

const { fetching, error, fetch } = useFetcher();
fetch(todoDetail);

useFetcher 詳細(xì)文檔

分頁請求

分頁場景下，page、pageSize、pageCount、total 等等好多狀態(tài)要自己維護(hù)，還要寫一堆邏輯來判斷何時應(yīng)該發(fā)送請求！

如果用 alovajs 提供的分頁 Hook，你就只需要這樣：

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

  // 列表數(shù)據(jù)
  data,

  // 是否為最后一頁
  // 下拉加載時可通過此參數(shù)判斷是否還需要加載
  isLastPage,

  // 當(dāng)前頁碼，改變此頁碼將自動觸發(fā)請求
  page,

  // 每頁數(shù)據(jù)條數(shù)
  pageSize,

  // 分頁頁數(shù)
  pageCount,

  // 總數(shù)據(jù)量
  total,
} = usePagination((page, pageSize) => queryStudents(page, pageSize));

// 翻到上一頁，page值更改后將自動發(fā)送請求
const handlePrevPage = () => {
  page.value--;
};

// 翻到下一頁，page值更改后將自動發(fā)送請求
const handleNextPage = () => {
  page.value++;
};

// 更改每頁數(shù)量，pageSize值更改后將自動發(fā)送請求
const handleSetPageSize = () => {
  pageSize.value = 20;
};

是不是清爽很多，節(jié)省了超多重復(fù)代碼。

usePagination 詳細(xì)文檔

表單提交

表單處理也很頭疼吧？alova 的 useForm 直接幫你搞定表單提交、表單草稿、自動重置表單項、多頁共享數(shù)據(jù)啥的。

const {
  form,
  send: submitForm,
  updateForm,
} = useForm((formData) => submitData(formData), {
  initialForm: {
    title: "",
    content: "",
    time: "",
  },
  resetAfterSubmiting: true,
});

useForm 詳細(xì)文檔

驗證碼實現(xiàn)

別再自己做倒計時了，這有！

const { loading: sending, send: sendCaptcha } = useCaptcha(
  () => sendCaptcha(mobile),
  {
    initialCountdown: 60,
  }
);

useCaptcha 詳細(xì)文檔

文件上傳策略

更簡單的文件上傳策略，支持對 base64、Blob、ArrayBuffer、Canvas 數(shù)據(jù)的自動識別和轉(zhuǎn)換，還可以多文件同時上傳、圖片預(yù)覽圖生成

const {
  fileList
  loading,
  progress
} = useUploader(({ file, name }) => uploadFile(file, name), {
  limit: 3,
  accept: ['png', 'jpg', 'gif'],
  imageTempLink: true
});

useAutoRequest(todoDetail, {
  enablePolling: 2000,
  enableVisibility: true,
  enableFocus: true,
  enableNetwork: true,
  throttle: 1000
}

// 組件A創(chuàng)建代理
useRequest(todoDetail, {
  middleware: actionDelegationMiddleware("someAction"),
});

// 組件B內(nèi)觸發(fā)操作
accessAction("someAction", (actions) => {
  actions.send();
});

const { onRetry, onFail, stop } = useRetriableRequest(pay, {
  retry(error) {
    return /network timeout/i.test(error.message);
  },
  backoff: {
    delay: 2000,
  },
});

const { readyState, data, eventSource, onMessage, onError, onOpen, on } =
  useSSE(() => chatGPT(), {
    withCredentials: true,
    interceptByGlobalResponded: true,
  });

useSSE 詳細(xì)文檔

本文轉(zhuǎn)載于:

https://juejin.cn/post/7301281320666693667

如果對您有所幫助，歡迎您點個關(guān)注，我會定時更新技術(shù)文檔，大家一起討論學(xué)習(xí)，一起進(jìn)步。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-746284.html