日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

立即請求函數

我們期望的場景是，

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

我的實現過程如下：

定義具體的數據返回值簽名

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

完整的簽名如下

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

函數實現如下：

export const useFetch = (
  fn: (args: Params) => Promise,
  initParams: Params  
): [Fetch, (params: Params) => Promise] => {
  
  // 定義基礎的數據格式
  const data = reactive>({
    loading: true,
    value: undefined,
    error: undefined
  }) as Fetch // 這里會報錯：T類型無法賦值給UnwrapRef類型
  // 我不懂為啥，UnwrapRef是vue的深層響應式類型的聲明
  // 這里導致我無法默認的類型賦值，不符合直覺，可能是我ts太菜了
  // 懂的大佬評論區(qū)帶帶我吧
  
  // 定義請求回調
  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ā)出請求了!

手動請求函數

我們期望的場景是，

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

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

完整的簽名如下

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

實現如下：

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ā)出請求!

自動請求函數

我們期望的場景是，

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

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

完整的簽名如下

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

實現如下：

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)聽參數變化
  const effects = watch([initParams], () => callback(initParams))
  // 卸載頁面時，關閉監(jiān)聽
  onUnmounted(() => effects())

  return data
}

我們驗證下功能

auto.gif

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

網頁題目：Vue3使用hook封裝常見的幾種異步請求函數場景，讓開發(fā)更絲滑
標題網址：http://www.5511xx.com/article/cdsjjop.html