[secret,setSecret]=useState(null)
useEffect(() => {
http.get('/api/suggest/qrcode/', { params: { uniqueid: store.uniqueid } }).then(res => {
//异步获取的值不是实时返回的
setSecret(res.secret);
return http.get('/api/suggest/userinfo/', { params: { secret: secret } })
})
// eslint-disable-next-line
}, [])
在上面的代码中,我想实现的业务逻辑是:
1.页面挂载后,我先请求后台接口1获取二维码和密钥
2.然后请求接口2,携带上接口1返回的密钥参数,请求二维码的状态信息,获取用户信息。
这段代码我在运行的时候,后台始终拿到的secret值是null,通过后台、前台打印日志,显示的secret是有值的,但为什么按照顺序执行了setSecret(res.secret)后,然后使用secret的值,没有实时取得res.secret值。解释就是,有延迟,在我执行请求接口2的时候,secret的值还没有更新完成。
//[secret,setSecret]=useState(null)
useEffect(() => {
http.get('/api/suggest/qrcode/', { params: { uniqueid: store.uniqueid } }).then(res => {
//异步获取的值不是实时返回的
//setSecret(res.secret);
return http.get('/api/suggest/userinfo/', { params: { secret: res.secret} })
})
// eslint-disable-next-line
}, [])
直接将接口1拿到的数据进行请求。这时后台能够正确拿到密钥信息进行后续处理。