日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

立即請(qǐng)求函數(shù)

我們期望的場(chǎng)景是，

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

我的實(shí)現(xiàn)過(guò)程如下：

定義具體的數(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ù)實(shí)現(xiàn)如下：

export const useFetch = (
  fn: (args: Params) => Promise,
  initParams: Params  
): [Fetch, (params: Params) => Promise] => {
  
  // 定義基礎(chǔ)的數(shù)據(jù)格式
  const data = reactive>({
    loading: true,
    value: undefined,
    error: undefined
  }) as Fetch // 這里會(huì)報(bào)錯(cuò)：T類型無(wú)法賦值給UnwrapRef類型
  // 我不懂為啥，UnwrapRef是vue的深層響應(yīng)式類型的聲明
  // 這里導(dǎo)致我無(wú)法默認(rèn)的類型賦值，不符合直覺(jué)，可能是我ts太菜了
  // 懂的大佬評(píng)論區(qū)帶帶我吧
  
  // 定義請(qǐng)求回調(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]
}

我們驗(yàn)證下

fetch.gif

頁(yè)面刷新后立即發(fā)出請(qǐng)求了!

手動(dòng)請(qǐng)求函數(shù)

我們期望的場(chǎng)景是，

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

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

完整的簽名如下

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

實(shí)現(xiàn)如下：

export const useFetchFn = (
  fn: (args: unknown) => Promise
): [Fetch, (params: unknown) => Promise] => {
  
  const data = reactive>({
    loading: false, // 默認(rèn)為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]
}

驗(yàn)證如下：

fetchfn.gif

頁(yè)面刷新后沒(méi)有發(fā)出請(qǐng)求，點(diǎn)擊按鈕之后才發(fā)出請(qǐng)求!

自動(dòng)請(qǐng)求函數(shù)

我們期望的場(chǎng)景是，

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

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

完整的簽名如下

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

實(shí)現(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í)行，可沒(méi)有這步
  const effects = watchSyncEffect(() => {
    callback(initParams)
  })

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

  return data
}

我們驗(yàn)證下功能

auto.gif

每次當(dāng)我們改變參數(shù)時(shí)自動(dòng)發(fā)送請(qǐng)求。

本文名稱：Vue3使用hook封裝常見的幾種異步請(qǐng)求函數(shù)場(chǎng)景，讓開發(fā)更絲滑
URL標(biāo)題：http://www.dlmjj.cn/article/cdsjjop.html