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

立即請求函數(shù)

我們期望的場景是，

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

我的實(shí)現(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ù)實(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 // 這里會報(bào)錯：T類型無法賦值給UnwrapRef類型
  // 我不懂為啥，UnwrapRef是vue的深層響應(yīng)式類型的聲明
  // 這里導(dǎo)致我無法默認(rèn)的類型賦值，不符合直覺，可能是我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]
}

我們驗(yàn)證下

fetch.gif

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

手動請求函數(shù)

我們期望的場景是，

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

這個的實(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

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

自動請求函數(shù)

我們期望的場景是，

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

這個的實(shí)現(xiàn)和立即請求函數(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í)行，可沒有這步
  const effects = watchSyncEffect(() => {
    callback(initParams)
  })

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

  return data
}

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

auto.gif

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

本文標(biāo)題：Vue3使用hook封裝常見的幾種異步請求函數(shù)場景，讓開發(fā)更絲滑
網(wǎng)址分享：http://m.5511xx.com/article/cdsjjop.html