Javascript 在react中，出于美观原因，如何将.then符号重写为异步函数

我有以下原始代码：

fetch（“https://api.spotify.com/v1/me/playlists", {
标题：{
授权：“持票人”+accessToken
},
})
.then（（response）=>response.json（））
.然后（（播放数据）=>{
让playlists=playlista.items；
让trackDataPromises=playlists.map（（playlist）=>{
让responsePromise=fetch（playlist.tracks.href{
标题：{
授权：“持票人”+accessToken
},
});
让trackDataPromise=responsePromise。然后（（响应）=>
response.json（）
);
回报承诺；
});
让allTracksDataPromises=Promise.all（trackDataPromises）；
让playlispromise=allTracksDataPromises。然后（（trackdata）=>{
trackDatas.forEach（（trackData，i）=>{
播放列表[i].trackDatas=trackData.items
.map（（项目）=>item.track）
.map（（轨迹数据）=>({
名称：trackData.name，
持续时间：trackData.duration_ms/1000，
}));
});
返回播放列表；
});
返回播放列表；
})
。然后（（播放列表）=>
这是我的国家({
playlists:playlists.map（（项目）=>{
返回{
名称：item.name，
id:item.id，
imageUrl:item.images[0]。url，
歌曲：item.trackDatas.slice（0,3），
uri:item.uri，
};
}),
})
)
.catch（（err）=>console.error（err+播放数据”）在javascript中，通常不会为任何内容指定
未定义的值。如果不将参数传递给函数，则该参数的值将为
未定义
。同样，如果不返回任何内容，则表示返回的是
未定义的

在这里，您故意不返回任何内容：

    return playlists;
  });
  return;  // <-------- this returns undefined
};

fetchPlaylist显式返回未定义的承诺。注意，您可以等待Promise.all，trackhref可以完全分解。
  // Return this:
  return Promise.all(trackDataPromises).then((trackDatas) => {
    trackDatas.forEach((trackData, i) => {
      playlists[i].trackDatas = trackData.items
        .map((item) => item.track)
        .map((trackData) => ({
          name: trackData.name,
          duration: trackData.duration_ms / 1000,
        }));
    });
    return playlists;
  });
};