立即請求函數(shù)

我們期望的場景是，

• 初始化一個請求函數(shù)，然后根據(jù)初始參數(shù)，立即發(fā)送請求
• 返回請求結果，并且返回請求回調(diào)函數(shù)，方便我們根據(jù)新的參數(shù)再次調(diào)用
• 要求返回值包含加載中狀態(tài)，錯誤信息以及正常的數(shù)據(jù)類型。

我的實現(xiàn)過程如下：

定義具體的數(shù)據(jù)返回值簽名

interface Fetch {
  loading: boolean,
  value?: T, // 具體的返回類型是泛型
  error?: string
}

完整的簽名如下

export declare function useFetch (
  fn: (args: Params) => Promise,
  initParams: Params  
): [Fetch, (params: Params) => Promise]

函數(shù)實現(xiàn)如下：

export const useFetch = (
  fn: (args: Params) => Promise,
  initParams: Params  
): [Fetch, (params: Params) => Promise] => {
  
  // 定義基礎的數(shù)據(jù)格式
  const data = reactive>({
    loading: true,
    value: undefined,
    error: undefined
  }) as Fetch // 這里會報錯：T類型無法賦值給UnwrapRef類型
  // 我不懂為啥，UnwrapRef是vue的深層響應式類型的聲明
  // 這里導致我無法默認的類型賦值，不符合直覺，可能是我ts太菜了
  // 懂的大佬評論區(qū)帶帶我吧
  
  // 定義請求回調(diào)
  const callback = (params: Params): Promise => new Promise((resolve, reject) => {
    data.loading = true
    fn(params)
      .then(result => {
        data.value = result as any
        resolve(result)
      })
      .catch(error => {
        data.error = error
        reject(error)
      })
      .finally(() => data.loading = false)
  })

  // 立即執(zhí)行
  watchSyncEffect(() => {
    callback(initParams)
  })

  return [data, callback]
}

我們驗證下

fetch.gif

頁面刷新后立即發(fā)出請求了!

手動請求函數(shù)

我們期望的場景是，

• 初始化一個請求函數(shù)
• 返回請求回調(diào)函數(shù)，方便我們調(diào)用
• 要求返回值包含加載中狀態(tài)，錯誤信息以及正常的數(shù)據(jù)類型

這個的實現(xiàn)和上面類似，我們不需要初始參數(shù)和類型，也不用立即執(zhí)行，

完整的簽名如下

export declare function useFetch (
  fn: (args: unknown) => Promise
): [Fetch, (params: unknown) => Promise]

實現(xiàn)如下：

export const useFetchFn = (
  fn: (args: unknown) => Promise
): [Fetch, (params: unknown) => Promise] => {
  
  const data = reactive>({
    loading: false, // 默認為false
    value: undefined,
    error: undefined
  }) as Fetch

  const callback = (params: unknown): Promise => new Promise((resolve, reject) => {
    data.loading = true
    fn(params)
      .then(result => {
        data.value = result as any
        resolve(result)
      })
      .catch(error => {
        data.error = error
        reject(error)
      })
      .finally(() => data.loading = false)
  })

  return [data, callback]
}

驗證如下：

fetchfn.gif

頁面刷新后沒有發(fā)出請求，點擊按鈕之后才發(fā)出請求!

自動請求函數(shù)

我們期望的場景是，

• 初始化一個請求函數(shù)，然后根據(jù)初始參數(shù)，立即發(fā)送請求
• 當參數(shù)發(fā)生變化時，自動根據(jù)最新參數(shù)發(fā)送請求
• 要求返回值包含加載中狀態(tài)，錯誤信息以及正常的數(shù)據(jù)類型。

這個的實現(xiàn)和立即請求函數(shù)類似，只需要監(jiān)聽參數(shù)的變化，

完整的簽名如下

export declare function useFetch (
  fn: (args: Params) => Promise,
  initParams: Params  
): Fetch

實現(xiàn)如下：

export const useAutoFetch = (
  fn: (args: Params) => Promise,
  initParams: Params  
): Fetch => {
  
  const data = reactive>({
    loading: true,
    value: undefined,
    error: undefined
  }) as Fetch

  const callback = (params: Params): Promise => new Promise((resolve, reject) => {
    data.loading = true
    fn(params)
      .then(result => {
        data.value = result as any
        resolve(result)
      })
      .catch(error => {
        data.error = error
        reject(error)
      })
      .finally(() => data.loading = false)
  })

  // 如果不需要立即執(zhí)行，可沒有這步
  const effects = watchSyncEffect(() => {
    callback(initParams)
  })

  // 自動監(jiān)聽參數(shù)變化
  const effects = watch([initParams], () => callback(initParams))
  // 卸載頁面時，關閉監(jiān)聽
  onUnmounted(() => effects())

  return data
}

我們驗證下功能

auto.gif

每次當我們改變參數(shù)時自動發(fā)送請求。

網(wǎng)頁標題：Vue3使用hook封裝常見的幾種異步請求函數(shù)場景，讓開發(fā)更絲滑
文章來源：http://uogjgqi.cn/article/cdsjjop.html