时间戳

首页 > 解决方案 > next.js 组件异步函数不执行 axios

javascript - next.js 组件异步函数不执行 axios

问题描述

我的 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
    }

相同的代码可以在页面加载时在 index 下执行，但不能在页面加载时在 Recommend 中执行。

提前谢谢。

标签： javascriptreactjsaxiosnext.js

解决方案

您不能使用awaitwiththen块。

您需要删除您的并在您的块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();
      });
  });
};

推荐阅读