Асинхронная функция компонента next.js не выполняет axios - PullRequest
Новая
       11

Асинхронная функция компонента next.js не выполняет axios

0 голосов
/ 06 декабря 2018

У меня есть следующие коды из моего проекта SPA next.js.Рекомендуется, чтобы компонент также загружался при загрузке страницы.Тем не менее, рекомендация загружает HTML, но не выполняет функцию getInitialProps.Интересно, будет ли next.js выполнять getInitialProps только с главной страницы (index.js).Если это так, как я могу также загрузить содержимое из других частей. 

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 Ответ

0 голосов
/ 06 декабря 2018

Вы не можете использовать await с блоком then.

Вам необходимо удалить свой await и вернуть обещание внутри блока then. 

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();
      });
  });
};
...