next.js组件异步函数不执行axios
next.js组件异步函数不执行axios
提问于 2018-12-06 15:17:44
我有以下来自我的next.js SPA项目的代码。Recommend是一个组件，也应该在页面加载时加载。但是，推荐器加载html，但不执行getInitialProps函数。我想知道next.js是否只会从主页(index.js)执行getInitialProps。如果是这样，我如何也从其他部分加载内容。
import Layout from '../components/layout'
import Recommend from './recommend'
import axios from "axios";
import React from 'react'
const Index = (props) => (
<Layout>
<Recommend/>
{/*{*/}
{/*console.log(props)*/}
{/*}*/}
</Layout>
);来自推荐的异步函数
Recommend.getInitialProps = async function () {
console.log("here");
let tracks = {};
await axios.get('http://localhost:4000/playlist/detail', {
params: {
id: 1
},
withCredentials: true
}).then(function (response) {
console.log("success");
console.log(response);
for (let i in response.data.playlist.tracks) {
if (response.data.playlist.tracks.hasOwnProperty(i)) {
tracks[i] = {
song_id: response.data.playlist.tracks[i].id,
song_name: response.data.playlist.tracks[i].name,
album_id: response.data.playlist.tracks[i].al.id,
album_name: response.data.playlist.tracks[i].al.name,
artist_id: response.data.playlist.tracks[i].ar[0].id,
artist_name: response.data.playlist.tracks[i].ar[0].name
// Todo add posters
}
}
}
}).catch(function (error) {
console.log("failed to get recommend playlist");
console.log(error);
});
return {
music: tracks
}相同的代码可以在页面加载时在索引下执行，但在推荐页面加载时不会在索引下执行。
谢谢预支。
回答 1
Stack Overflow用户
发布于 2018-12-06 15:34:23
不能将await与then块一起使用。
您需要删除您的await并在您的then块中返回一个promise。
Recommend.getInitialProps = async function() {
console.log('here');
return new Promise((resolve, reject) => {
axios.get('http://localhost:4000/playlist/detail', {
params: {
id: 1
},
withCredentials: true
})
.then(function(response) {
console.log('success');
console.log(response);
let tracks = {};
for (let i in response.data.playlist.tracks) {
if (response.data.playlist.tracks.hasOwnProperty(i)) {
tracks[i] = {
song_id: response.data.playlist.tracks[i].id,
song_name: response.data.playlist.tracks[i].name,
album_id: response.data.playlist.tracks[i].al.id,
album_name: response.data.playlist.tracks[i].al.name,
artist_id: response.data.playlist.tracks[i].ar[0].id,
artist_name: response.data.playlist.tracks[i].ar[0].name
// Todo add posters
};
}
}
// async success
resolve({ music: tracks });
})
.catch(function(error) {
console.log('failed to get recommend playlist');
console.log(error);
// async failure
reject();
});
});
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53646332
复制相关文章
相似问题
腾讯云开发者
