如何在反应中出于美学原因将 .then 符号转换为异步函数

Question

出于可读性目的，我正在尝试使用 asyc 函数而不是 fetch((.then(( 表示法。这是代码。

fetch("https://api.spotify.com/v1/me", {
headers: {
Authorization: "Bearer " + accessToken
}
})
.then(response => response.json())
.then(data =>
this.setState({
user: {
name: data.display_name,
href: data.external_urls.spotify
}
})
)
.catch(error => console.log("Data async function"));

我试过这个，但没有用。

async function data() {
const response = fetch("https://api.spotify.com/v1/me", {
headers: {
Authorization: "Bearer " + accessToken
}
});
const data = response.json();
this.setState({
user: {
name: data.display_name,
href: data.external_urls.spotify
}
})
}
data().catch(error => console.log("Data async function"));

Answer 1

你去 ：

这是您将代码转换为async await方式的方法：

const your_function = async () => { 
try{
const res = await fetch("https://api.spotify.com/v1/me", { // <--- MISSING await
headers: {
Authorization: "Bearer " + accessToken
}
})
const data = await response.json(); // <--- MISSING await
this.setState({
user: {
name: data.display_name,
href: data.external_urls.spotify
}
})
} catch(error) {
console.log("Data async function"));
}
}; 

注意：根据您在所有promise函数之前await缺少的更新代码，您可以在上面的代码片段上进行比较

我确实建议在任何时候都涵盖try catch block中的所有代码 您正在使用async await