封装一个属于自己的useRequest，一起玩转Vue3 Hooks！

2023-12-15 11:27:05

踏入Vue3 Hooks的奇妙世界

自Vue3发布以来，Hooks就备受瞩目。作为一种新的API，Hooks使我们能够在函数式组件中使用状态和其它React特性，而无需使用类组件。这使得我们的代码更加简洁和易于维护。

Hooks的出现，为Vue3带来了许多新的可能。我们可以使用Hooks来创建自己的自定义组件、状态管理工具和其它实用工具。同时，Hooks也使我们能够更轻松地将React的生态系统集成到Vue3中。

自定义useRequest Hook，让数据请求变得更简单

在Vue3中，useRequest是一个非常有用的Hook。它可以帮助我们轻松地向服务器发送请求并处理响应。useRequest Hook的使用非常简单，只需要在组件中导入useRequest Hook，然后调用该Hook即可。

import { useRequest } from '@vueuse/core'

const App = {
  setup() {
    const { data, error, pending } = useRequest('https://example.com/api/users')

    // 使用data, error, pending来处理请求结果
  }
}

useRequest Hook提供了许多有用的选项，可以帮助我们定制请求行为。例如，我们可以指定请求方法、请求头、请求体以及超时时间等。useRequest Hook还提供了许多事件钩子，可以帮助我们处理请求的各个阶段，如请求成功、请求失败、请求开始、请求结束等。

进阶探索：创建自己的useLazyRequest Hook

现在，让我们更进一步，创建一个自己的useLazyRequest Hook。useLazyRequest Hook与useRequest Hook类似，但它允许我们在需要时才发送请求。这对于那些不需要立即发送请求的场景非常有用。

import { useRequest } from '@vueuse/core'

export function useLazyRequest(url, options) {
  const { data, error, pending, run } = useRequest(url, options)

  // run方法可以手动触发请求
  return { data, error, pending, run }
}

现在，我们可以在组件中使用useLazyRequest Hook来发送请求。

import { useLazyRequest } from './useLazyRequest'

const App = {
  setup() {
    const { data, error, pending, run } = useLazyRequest('https://example.com/api/users')

    // 调用run方法来触发请求
    run()

    // 使用data, error, pending来处理请求结果
  }
}