javascript - Abrufanforderung an lokale Datei funktioniert nicht




reactjs fetch-api (3)

Ihre JSON-Datei muss vom Server bereitgestellt werden, damit Sie den Express-Server (oder einen anderen) benötigen. In diesem Beispiel verwenden wir express .

Hinweis: Sie können auch Git Repo herunterladen

App.js-Datei

import React, { Component } from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    const myHeaders = new Headers({
      "Content-Type": "application/json",
      Accept: "application/json"
    });

    fetch("http://localhost:5000/movie", {
      headers: myHeaders,

    })
      .then(response => {
        console.log(response);
        return response.json();
      })
      .then(data => {
        console.log(data);
        this.setState({ data });
      });
  }

  render() {
    return <div className="App">{JSON.stringify(this.state.data)}</div>;
  }
}

export default App;

server.js

var express = require("express");
var data = require('./movie.json'); // your json file path
var app = express();


app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

app.get("/movie", function(req, res, next) {
  res.send(data);
});

app.listen(5000, () => console.log('Example app listening on port 5000!'))

Ich versuche, eine Anfrage in einer lokalen Datei zu stellen, aber ich weiß nicht, wann ich versuche, auf meinem Computer einen Fehler anzuzeigen. Ist es möglich, eine Datei in Ihrem Projekt abzurufen?

 // Option 1
 componentDidMount() {
     fetch('./movies.json')
     .then(res => res.json())
     .then((data) => {
        console.log(data)
     });
 }

 error: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 -->  .then(res => res.json())

 // Option 2
 componentDidMount() {
    fetch('./movies.json', {
       headers : { 
         'Content-Type': 'application/json',
         'Accept': 'application/json'
       }
    })
   .then( res => res.json())
   .then((data) => {
        console.log(data);
   });
 }

 error1: GET http://localhost:3000/movies.json 404 (Not Found) at App.js:15 --> fetch('./movies.json', {
 error2: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 at App.js: 10 -->  .then(res => res.json())


 // This works
 componentDidMount() {
   fetch('https://facebook.github.io/react-native/movies.json')
   .then( res => res.json() )
   .then( (data) => {
      console.log(data)
   })
 }

Mein Ansatz besteht darin, mit dem express-generator einen schnellen lokalen Server ngrok , dann ngrok (kostenlose Ebene ist in Ordnung) und Ihre App auf die von ihr erstellte URL zu verweisen. Dies hat den Vorteil, dass Sie das Abrufen auf einfache Weise im iOS-Simulator oder Android-Emulator sowie auf einem Gerät testen können, das nicht an Ihren Computer angeschlossen ist. Außerdem können Sie die URL auch an Personen senden, die Ihre App testen. Natürlich müsste es eine Möglichkeit geben, diese URL manuell einzugeben, damit sie von der App als Abrufendpunkt festgelegt werden kann.


Versuchen Sie, Ihre JSON-Datei wie folgt im öffentlichen Ordner abzulegen:

public / movies.json

und dann holen mit

fetch('./movies.json')

oder

fetch('movies.json')

Ich habe das gleiche Problem zuvor erlebt. Wenn ich die JSON-Datei in den öffentlichen Ordner lege, ist das Problem behoben. Bei Verwendung von fetch liest React normalerweise Asset- / Ressourcendateien im öffentlichen Ordner.







fetch-api