React Native获取异步函数的返回值

Question

我正在尝试从MYSQL服务器获取酒吧位置数据，我的获取功能运行良好。但在那之后，这个try-catch块不会返回任何内容。我也尝试过不尝试捕获块，但它不会改变任何

getPubsFromDatabase = async () => {
let response = await fetch(fetchDataUrl, {
method: 'POST',
headers: 
{
'Accept': 'application/json',
'Content-Type': 'application/json',
},
});
try{
let json = await response.json();
console.log(json)
return json;
}
catch (error) {
console.log(error);
}
}

在这里，我试图得到函数的返回值。但在这个版本中，我甚至看不到任何console.log输出。我所说的版本的意思是，如果我把第二行从异步块中去掉；等待"；关键字，我可以看到console.log，但我它给出了"未定义的"；然后

(async () => {
const locationsData = await getPubsFromDatabase();
console.log(locationsData)
})()

Answer 1

您可以在函数fetch中使用、和catch。

const getPubsFromDatabase = () => {
return fetch(fetchDataUrl, {
method: 'POST',
headers: 
{
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(async (response) => {
const json = await response.json().then((data)=>{
return data;
}).catch((err)=>{
console.log('error from json method: ',err);
return  { error: {
message: 'error from json method',
object: err
}};
});
console.log(json);
return json;
}).catch((error) => {
console.log('error from request: ', error);
return  {
error: {
message: 'error from request', object: error
}
};
});
}

当您使用getPubsFromDatabase方法时，将采用下一种方法：

(async () => {
const locationsData = await getPubsFromDatabase();
console.log(locationsData);
})()

Answer 2

您可以使用Promise返回结果或错误。在下面的示例中，我使用了axios库，但您也可以使用fetch-api进行同样的尝试例如

export const getData = () => {
return new Promise((resolve, reject) => {
const url = ApiConstant.BASE_URL + ApiConstant.ENDPOINT;
const API_HEADER = {
"Authorization": token,
};
axios
.get(url, {
headers: API_HEADER,
})
.then((res) => {
resolve(res.data);
})
.catch((error) => {
// handle error
reject(error);
console.log(error);
});
})
}

您可以在组件或屏幕中调用上述函数，如下所示：

getData().then(
(data) => {
}
).catch(
error => {
console.log(error)
}
)

Answer 3

我解决了这个问题，不是从函数中返回值，而是在函数中设置值。这似乎现在奏效了。

const [locationsData, setLocationsData] = useState();
getPubsFromDatabase = async () => {
let response = await fetch(fetchDataUrl, {
method: 'POST',
headers: 
{
'Accept': 'application/json',
'Content-Type': 'application/json',
},
});
try{
let json = await response.json();
setLocationsData(json); // Here, I changed the value of the locationsData instead of returning
}
catch (error) {
console.log(error);
}
}

并调用函数：

useEffect(()=> {
getPubsFromDatabase();
},[])