关于React Native如何按顺序获取fetch api 问题
来源：7-1 本章目标
慕尼黑0536602
2022-05-18
hi 老师，
上次我问了您一个问题，就是如何让api按顺序执行，您跟我说使用async await .
我试了很多次，直到怀疑人生，还是没有成功。。麻烦您帮我看一下我的代码，是哪里出问题了？谢谢哈！
代码依次执行的顺序：
1.获得用户的token;
2.获取用户的data;
3.通过用户的id,获取该用户的所有朋友列表
const [userToken,setUserToken] = useState('');
const doInitialLaunch = async()=>{
await storage.getToken().then(token=>setUserToken(token)).catch(error=>console.log("获取token发生错误：",error));
if(userToken){
await fetch(`${baseUrl}/getMe`,{
method : "get",
headers :new Headers({
'Content-Type':'application/json',
"Authorization": `Bearer ${userToken}`
}),
})
.then(res=>res.json())
.then(result =>{
setMe(result.data);
console.log("现在的me是：",me);
})
.catch(error =>console.log("收到的我的发生了错误：",error));
}
if(me?._id){
await fetch(`${baseUrl}/getSortedUsers`,{
method:'post',
headers :new Headers({
'Content-Type':'application/json',
}),
})
.then(res=>res.json())
.then(result => setData(result.users))
.catch(error =>console.log("获取全部用户错误：",error))
}
}
useEffect(()=>{
doInitialLaunch();
return ()=>{
unmounted = true;
}
},[userToken,unmounted]);
3回答
-
另外一个方式可以用一个变量来接受await后面执行的结果比如：
var token=await storage.getToken();
然后setUserToken(token)).catch(error=>console.log("获取token发生错误：",error));012022-05-20 -
CrazyCodeBoy
2022-05-20
你这个方式也是可以的。00 -
慕尼黑0536602
提问者
2022-05-18
hi 老师，经过很多次尝试之后，我采用了一个笨办法，试出来了可行。不过如果您如果有更好的方案，也请您点播一下我哈。我把一些需要获取到的变量，都提取出来，然后放在useEffect中，这样虽然await需要时间，但是当获取到的时候，页面就会再次刷新。解决了只获得一次页面刷新，导致没办法执行后面的request的窘境，具体代码如下：
const baseUrl = "XXX/api/v1/userInfo";
const CardsListScreen = () => {
let unmounted = false;//组件是否有卸载
// const isFocused = useIsFocused();
//init data
const [userToken,setUserToken] = useState('');
const [me,setMe] = useState({});
const [_id,setId] = useState('');
const [data,setData] = useState([]);
const getUserToken = async()=>{
await storage.getToken().then(token=>setUserToken(token)).catch(error=>console.log("获取token发生错误：",error));
}
useEffect(()=>{
getUserToken();
if(userToken&&!unmounted){
fetch(`${baseUrl}/getMe`,{
headers :new Headers({
'Content-Type':'application/json',
"Authorization": `Bearer ${userToken}`
}),
})
.then(res=>res.json())
.then(result=>{
setMe(result.data);
setId(me._id);
console.log("首页收到的me是：",me?._id)
if(me?._id){
fetch(`${baseUrl}/getSortedUsers`,{
method:'post',
headers :new Headers({
'Content-Type':'application/json',
}),
body : JSON.stringify({
_id:me?._id
})
})
.then(res=>res.json())
.then(result => {
console.log("获得全部用户：",result)
setData(result.users);
})
.catch(error =>console.log("获取全部用户错误：",error))
}
})
.catch(error =>console.log("收到的me发生错误：",error))
}
},[userToken,_id,unmounted])
00
相似问题