ahooks useRequest 手动和自动触发请求避坑总结

useRequest的作用

useRequest的官网是这样介绍的,它是一个强大的异步数据管理的 Hooks,React 项目中的网络请求场景使用 useRequest 就够了。它是有很多的功能,本文主要是讲解手动和自动触发请求相关的参数,如果不注意的话,就会踩到坑。

如果我们没有用任何的请求库,而是直接使用的请求,就需要自己维护state,例如:

   // 手动维护的state
  const [isLoading, setIsLoading] = useState(false)
  const [isError, setIsError] = useState(false)
  const [plainData, setPlainData] = useState(null)

  const [palinId, setPlainId] = useState(1)
    
  // 请求中手动设置state
  function plainFetch() {
    setIsLoading(true)
    setIsError(false)
    fetch('http://localhost:3005/api/user?id=' + palinId, {
      method: 'GET'
    })
      .then(data => {
        setIsLoading(false)
        setPlainData(data)
      })
      .catch(() => {
        setIsLoading(false)
        setIsError(true)
      })
  }

这段代码就是自己维护了isLoadingisError2个状态。

而使用了useRequest之后的效果就是这样:

  const [palinId, setPlainId] = useState(1)
  const { loading, data, error } = useRequest(() => {
    return fetch('http://localhost:3005/api/user?id=' + palinId, {
      method: 'GET'
    })
  })

可以看到useRequest会返回这3个常用的状态,而不需要用户再手动的维护。 其他的功能就不一一介绍了。

首次是否自动触发

首先useRequest是有一个参数manual 来决定是否手动触发请求,默认是falseuseRequest会在执行的时候自动的发送一次请求,但是注意它只会触发一次自动请求,之后的请求是不会根据参数的变化而触发的,例如:

const [id, setId] = useState(1)
   useRequest(
    () => {
      return fetch('http://localhost:3005/api/user?id=' + id, {
        method: 'GET'
      })
    },
    {
        manual: false
    }
  )
  function onClick() {
    setId(id + 1)
  }

useRequest的请求依赖了id,但是当id变化的时候,并不会重新触发请求。

useRequest 传参数手动触发

如果后续还想要手动触发请使用runrunAsync方法,这和是否设置了manual无关。手动触发最好就是每次都传递请求的参数,请求的函数中会接受传递的参数,例如:

  const [id, setId] = useState(1)
  const { run } = useRequest(
    param => {
      return fetch('http://localhost:3005/api/user?id=' + param, {
        method: 'GET'
      })
    },
    {
      defaultParams: [id]
    }
  )
  function onClick() {
    setId(id + 1)
    run(id + 1)
  }

run方法传递的参数就是param参数,这时可以发现run方法其实就是一个接受参数的异步请求方法了。

useRequest 不传参数手动触发

useRequest提供了refreshrefreshAsync2个方法,它们用于触发用上一次请求的参数重新发起请求。例如:

  const [id, setId] = useState(1)
  console.log('id', id)
  const { refresh } = useRequest(() => {
    return fetch('http://localhost:3005/api/user?id=' + id, {
      method: 'GET'
    })
  })
  function onClick() {
    setId(id + 1)
    refresh()
  }

注意: 虽然设置了id之后,再调用了refresh方法,但是发送请求的id,都是上一次的id值,所以是不正确的。
如果是单纯的刷新是可以的,如果是用新的参数发送请求,则需要监听参数变化之后再refresh,例如:

 const [id, setId] = useState(1)
  const { refresh } = useRequest(
    () => {
      return fetch('http://localhost:3005/api/user?id=' + id, {
        method: 'GET'
      })
    },
    {
      manual: true
    }
  )
  function onClick() {
    setId(id + 1)
  }
  // 监听id变化后 再refresh()
  useEffect(() => {
    refresh()
  }, [id])

注意上面还把manual设置为了true,否则首次会自动触发一次,useEffect第一次也会触发一次。

useRequest的响应式触发

我们有时候的场景是希望只要state变化就会自动触发请求,而不需要手动再传参数触发执行,这时就可以设置另一个参数refreshDeps,用于声明依赖的state,当state变化时会自动触发请求,例如:

  const [id, setId] = useState(1)
useRequest(
    () => {
      return fetch('http://localhost:3005/api/user?id=' + id, {
        method: 'GET'
      })
    },
    {
      refreshDeps: [id]
    }
  )
  function onClick() {
    setId(id + 1)
  }

可以看到我们只需要setId 初始id的变化,就能够自动的触发请求。

但是注意这里一定不要设置manual为true,如果设置了将不会自动触发请求。

总结

本文主要是讲解使用useRequest时和触发场景相关的参数,用户在使用的时候应该先确定你的使用场景是什么,然后根据使用场景选择相应的使用方法。

原文链接:https://juejin.cn/post/7247740398561394748 作者:前端良文

(0)
上一篇 2023年6月24日 上午10:56
下一篇 2023年6月24日 上午11:06

相关推荐

发表回复

登录后才能评论