Instagram API，在 React 应用程序中显示媒体

Question

我目前正试图在 React 应用程序上设置 API。我确实手动测试了我的访问令牌并且它有效

https://api.instagram.com/v1/users/self/media/recent/?access_token=${accessToken}

但是当它要将这些数据导入应用程序的语句时我卡住了。

我检查了手动添加 url 到状态中的组件的体系结构并且它成功了，所以我得到的问题可能是在我调用 diplayInsta() 的函数中或在 [=29= .js 方法

const Insta = {
  getAccessToken() {
    //check if token exist
    if (accessToken) {
      return new Promise(resolve => resolve(accessToken));
    }
    //token ref
    return fetch(`https://api.instagram.com/oauth/authorize/? client_id=${client_id}&redirect_uri=${redirectURI}&response_type=token`, {
      method: 'POST'
    }).then(response => {
      return response.json();
    }).then(jsonResponse => {
      accessToken = jsonResponse.access_token;
    });
  },
  async display() {
    if (!accessToken) {
      this.getAccessToken();
    }
    try {
      let response = await fetch(`https://api.instagram.com/v1/users/self/media/recent/?access_token=${accessToken}`, {
        method: 'GET',
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      });
      if (response.ok) {
        let jsonResponse = await response.json();
        let medias = jsonResponse.medias.data.map(media => ({
          id: media.data.id,
          image: media.data.images.standard_resolution.url
        }));
        return medias;
      }
      throw new Error('Request failed!');
    } catch (error) {
      console.log(error);
    }
  }
}

这是我的 github link 项目，您可以在其中找到整个项目。 https://github.com/erwanriou/reactisbroken

我觉得这可能是一个很小的错误，但我找不到它在哪里...我好心人可以帮助我指明正确的方向...

更新 - 在第一个答案之后，我确实实现了代码，现在我解决了访问令牌部分，但仍然坚持将其显示为 App.js 的状态，这是我目前的主要问题

这里是工作承诺的屏幕： https://www.dropbox.com/s/w9wh3h3m58r3n06/Promise.jpg?dl=0

Answer 1

好的，我自己找到了解决方案。我把它放在这里以防你们中的一些人遇到类似的问题：

let accessToken;

const Insta = {
  getAccessToken() {
    if (accessToken) {
      return new Promise(resolve => resolve(accessToken));
    }
    const accessTokenMatch = window.location.href.match(/access_token=([^&]*)/);
    if (accessTokenMatch) {
      accessToken = accessTokenMatch[1];
      return accessToken;
    } else {
      const Url = `https://api.instagram.com/oauth/authorize/?client_id=${client_id}&redirect_uri=${redirectURI}&response_type=token`
      window.location = Url;
    }
  },
  async display() {
    if (!accessToken) {
      this.getAccessToken();
    }
    try {
      let response = await fetch(`https://api.instagram.com/v1/users/self/media/recent/?access_token=${accessToken}`, {
        method: 'GET'
      });
      if (response.ok) {
        console.log(response);
        let jsonResponse = await response.json();
        let medias = jsonResponse.data.map(media => ({
          id: media.id,
          image: media.images.standard_resolution.url
        }));
        return medias;
      }
      throw new Error('Request failed!');
    } catch (error) {
      console.log(error);
    }
  }
}

现在将提取数据导入状态的部分是：

import React, { Component } from 'react';
import './App.css';

import Header from '../Header/Header.js';
import MediaList from '../MediaList/MediaList.js';
import Insta from '../../util/insta.js';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mediasResult: [],
      accountName: 'Erwan'
    };
  }


  componentDidMount() {
    Insta.display().then(medias => this.setState({mediasResult: medias}));
  }

  render() {
    return (
      <div className="App">
        <Header accountName={this.state.accountName}/>
        <MediaList medias={this.state.mediasResult}/>
      </div>
    );
  }
}

export default App;

事实上，componentDidMount 拯救了我。它可以让您将提取数据导入状态。

Instagram API，在 React 应用程序中显示媒体

Instagram API, diplaying medias in react application

javascript

api

async-await

reactjs

instagram-api