ahooks解決使用者多次提交方法範例

2022-07-11 18:01:42

引言

本文是深入淺出 ahooks 原始碼系列文章的第四篇，這個系列的目標主要有以下幾點：

加深對 React hooks 的理解。
學習如何抽象自定義 hooks。構建屬於自己的 React hooks 工具庫。
培養閱讀學習原始碼的習慣，工具庫是一個對原始碼閱讀不錯的選擇。

注：本系列對 ahooks 的原始碼解析是基於 v3.3.13。自己 folk 了一份原始碼，主要是對原始碼做了一些解讀，可見詳情。

系列文章：

本文來探索一下 ahooks 的 useLockFn。

場景

試想一下，有這麼一個場景，有一個表單，你可能多次提交，就很可能導致結果不正確。

解決這類問題的方法有很多，比如新增 loading，在第一次點選之後就無法再次點選。另外一種方法就是給請求非同步函數新增上一個靜態鎖，防止並行產生。這就是 ahooks 的 useLockFn 做的事情。

useLockFn

useLockFn 用於給一個非同步函數增加競態鎖，防止並行執行。

它的原始碼比較簡單，如下所示：

import { useRef, useCallback } from 'react';
// 用於給一個非同步函數增加競態鎖，防止並行執行。
function useLockFn<P extends any[] = any[], V extends any = any>(fn: (...args: P) => Promise<V>) {
  // 是否現在處於一個鎖中
  const lockRef = useRef(false);
  // 返回的是增加了競態鎖的函數
  return useCallback(
    async (...args: P) => {
      // 判斷請求是否正在進行
      if (lockRef.current) return;
      // 請求中
      lockRef.current = true;
      try {
        // 執行原有請求
        const ret = await fn(...args);
        // 請求完成，狀態鎖設定為 false
        lockRef.current = false;
        return ret;
      } catch (e) {
        // 請求失敗，狀態鎖設定為 false
        lockRef.current = false;
        throw e;
      }
    },
    [fn],
  );
}
export default useLockFn;

可以看到，它的入參是非同步函數，返回的是一個增加了競態鎖的函數。通過 lockRef 做一個標識位，初始化的時候它的值為 false。當正在請求，則設定為 true，從而下次再呼叫這個函數的時候，就直接 return，不執行原函數，從而達到加鎖的目的。

缺點

雖然實用，但缺點很明顯，我需要給每一個需要新增競態鎖的請求非同步函數都手動加一遍。那有沒有比較通用和方便的方法呢？

答案是可以通過 axios 自動取消重複請求。

axios 自動取消重複請求

axios 取消請求

對於原生的 XMLHttpRequest 物件發起的 HTTP 請求，可以呼叫 XMLHttpRequest 物件的 abort 方法。

那麼我們專案中常用的 axios 呢？它其實底層也是用的 XMLHttpRequest 物件，它對外暴露取消請求的 API 是 CancelToken。可以使用如下：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.post('/user/12345', {
  name: 'gopal'
}, {
  cancelToken: source.token
})
source.cancel('Operation canceled by the user.'); // 取消請求，引數是可選的

另外一種使用的方法是呼叫 CancelToken 的建構函式來建立 CancelToken，具體使用如下：

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});
cancel(); // 取消請求

如何自動取消重複的請求

知道了如何取消請求，那怎麼做到自動取消呢？答案是通過 axios 的攔截器。

請求攔截器：該類攔截器的作用是在請求傳送前統一執行某些操作，比如在請求頭中新增 token 相關的欄位。
響應攔截器：該類攔截器的作用是在接收到伺服器響應後統一執行某些操作，比如發現響應狀態碼為 401 時，自動跳轉到登入頁。

具體的做法如下：

第一步，定義幾個重要的輔助函數。

generateReqKey：用於根據當前請求的資訊，生成請求 Key。只有 key 相同才會判定為是重複請求。這一點很重要，而且可能跟具體的業務場景有關，比如有一種請求，輸入框模糊搜尋，使用者高頻輸入關鍵字，一次性發出多個請求，可能先發出的請求，最後才響應，導致實際搜尋結果與預期不符。這種其實就只需要根據 URL 和請求方法判定其為重複請求，然後取消之前的請求就可以了。

這裡我認為，如果有需要的話，可以暴露一個 API 給開發者進行自定義重複的規則。這裡我們先根據請求方法、url、以及引數生成唯一的 key 去做。

function generateReqKey(config) {
  const { method, url, params, data } = config;
  return [method, url, Qs.stringify(params), Qs.stringify(data)].join("&");
}

addPendingRequest。用於把當前請求資訊新增到 pendingRequest 物件中。

const pendingRequest = new Map();
function addPendingRequest(config) {
  const requestKey = generateReqKey(config);
  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
    if (!pendingRequest.has(requestKey)) {
       pendingRequest.set(requestKey, cancel);
    }
  });
}

removePendingRequest。檢查是否存在重複請求，若存在則取消已發的請求。

function removePendingRequest(config) {
  const requestKey = generateReqKey(config);
  if (pendingRequest.has(requestKey)) {
     const cancelToken = pendingRequest.get(requestKey);
     cancelToken(requestKey);
     pendingRequest.delete(requestKey);
  }
}

第二步，新增請求攔截器。

axios.interceptors.request.use(
  function (config) {
    removePendingRequest(config); // 檢查是否存在重複請求，若存在則取消已發的請求
    addPendingRequest(config); // 把當前請求資訊新增到pendingRequest物件中
    return config;
  },
  (error) => {
     return Promise.reject(error);
  }
);

第二步，新增響應攔截器。

axios.interceptors.response.use(
  (response) => {
     removePendingRequest(response.config); // 從pendingRequest物件中移除請求
     return response;
   },
   (error) => {
      removePendingRequest(error.config || {}); // 從pendingRequest物件中移除請求
      if (axios.isCancel(error)) {
        console.log("已取消的重複請求：" + error.message);
      } else {
        // 新增例外處理
      }
      return Promise.reject(error);
   }
);

到這一步，我們就通過 axios 完成了自動取消重複請求的功能。