Question

我的next.js SPA项目有以下代码。推荐当页面加载时组件也应加载。但是，建议加载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
    }

相同的代码在页面加载时可以在索引下执行，而在页面加载时不可以在“推荐”中执行。

谢谢。

Answer 1

您不能将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();
      });
  });
};

next.js组件异步功能不执行axios

1 个答案: