ReactJS componentDidMount，Fetch Spotify API 和 Promise答案

【问题标题】：ReactJS componentDidMount, Fetch Spotify API and PromiseReactJS componentDidMount，Fetch Spotify API 和 Promise
【发布时间】：2017-10-22 12:53:10
【问题描述】：

我正在学习如何使用 ReactJS、Spotify API 和 Promise。我正在尝试在 Spotify 上获取音乐家的热门专辑并播放 30 秒的曲目。

我正在使用一个名为 spotify-web-api-node 的 Spotify 包，我想我不了解 React 或 JS 的一些基本知识。 Syntax error: Unexpected token, expected ( (11:8)

从“反应”导入反应；

import SpotifyWebApi from 'spotify-web-api-node';
require('dotenv').config();


export default class SpotifyComponent extends React.Component {
  // Create the api object with the credentials
  const spotifyApi = new SpotifyWebApi({
    clientId : process.env.REACT_APP_SPOTIFY_CLIENT_ID,
    clientSecret : process.env.REACT_APP_SPOTIFY_CLIENT_SECRET
  });
// Save the access token so that it's used in future calls
  componentDidMount() {
    **(11:8)** --> return spotifyApi = new Promise((resolve, reject) => {
      spotifyApi.clientCredentialsGrant()

      .then( => (data) {
        console.log('The access token expires in ' + data.body['expires_in']);
        console.log('The access token is ' + data.body['access_token']);
      });

      // using Promises through Promise, Q or when - get Elvis' albums in range [20...29]
      spotifyApi.getArtistAlbums('43ZHCT0cAZBISjO8DG9PnE', {limit: 10, offset: 20})
        .then(function(data) {
          console.log('Album information', data);
        }, function(err) {
          console.error(err);
        });
    });

    SpotifyWebApi.setPromiseImplementation(Q);
  }
}

【问题讨论】：

具体是什么问题？
我已经更新了代码@jiargolisvt

标签： javascript api reactjs

【解决方案1】：

您使用spotify-api 提供的承诺的方式是正确的。但是，您不应该从componentDidMount 返回Promise。 React 没有任何用处。

只需在 componentDidMount 中运行基于 Promise 的函数。

componentDidMount() {

  // the next line will actually trigger the promise to run
  spotifyApi.clientCredentialsGrant()
    .then((data) => { // this line was missing "=>" in your original code
      console.log('The access token expires in ' + data.body['expires_in']);
      console.log('The access token is ' + data.body['access_token']);
    });

  // the next line also triggers a promise to run
  spotifyApi.getArtistAlbums('43ZHCT0cAZBISjO8DG9PnE', {limit: 10, offset: 20})
    .then(function(data) {
      console.log('Album information', data);
    }, function(err) {
      console.error(err);
    });
}

您还可以在导入后立即将Q 设置为承诺提供者。

import SpotifyWebApi from 'spotify-web-api-node';
SpotifyWebApi.setPromiseImplementation(Q);

【讨论】：

谢谢@Potorr
question 在const spotifyApi = new SpotifyWebApi({ 这一行收到一条错误消息，说有Syntax error: Unexpected token, expected 如何解决这个问题？
还将该代码移出您的班级，请参阅@Austin_Greco 的回答

【解决方案2】：

你不能在这样的类中定义const。

您应该将其移到外面或删除const：

// Create the api object with the credentials
const spotifyApi = new SpotifyWebApi({
  clientId : process.env.REACT_APP_SPOTIFY_CLIENT_ID,
  clientSecret : process.env.REACT_APP_SPOTIFY_CLIENT_SECRET
});

export default class SpotifyComponent extends React.Component {

或

export default class SpotifyComponent extends React.Component {
  // Create the api object with the credentials
  spotifyApi = new SpotifyWebApi({
    clientId : process.env.REACT_APP_SPOTIFY_CLIENT_ID,
    clientSecret : process.env.REACT_APP_SPOTIFY_CLIENT_SECRET
  });

【讨论】：