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)
})
}
这段代码就是自己维护了isLoading
和isError
2个状态。
而使用了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
来决定是否手动触发请求,默认是false
。 useRequest
会在执行的时候自动的发送一次请求,但是注意它只会触发一次自动请求,之后的请求是不会根据参数的变化而触发的,例如:
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 传参数手动触发
如果后续还想要手动触发请使用run
和runAsync
方法,这和是否设置了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提供了refresh
和refreshAsync
2个方法,它们用于触发用上一次请求的参数重新发起请求。例如:
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 作者:前端良文