你如何从nodejs服务器获取一个json？

Question

Below is the front end with react and the backend with nodejs/expresjs. I can correctly get the data to the backend but when I try to download the data to my front end it constantly gives me a

SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data[Learn More]"

But I have used a similar format prior and had no issues. Can anyone give me any advice on the issue?

Thank you!

frontend

import React from 'react';

export default () => {
  let images = fetch('http://localhost:3000/datastore', {
    mode: "no-cors", // no-cors, cors, *same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, same-origin, *omit
  })
  .then(response => response.json());

  console.log(images);

  images.forEach((u, i) => {
    console.log(images[i])
  });

  return <div>

  </div>
}

backend

var express = require('express');
var router = express.Router();
let Datastore = require('@google-cloud/datastore')
const datastore = Datastore();
const query = datastore.createQuery('image');

router.get('/', function(req, res, next){
  datastore
  .runQuery(query)
  .then(results => {
    let tasks = results[0];
    console.log('Tasks:');
    tasks.forEach(task => {
        const taskKey = task[datastore.KEY];
        console.log(taskKey.id, task);
    });
    console.log(tasks);
    return res.send(tasks);
  })
  .catch(err => {
    console.error('ERROR:', err);
    return res.status(200).send({
        success: false
    });
  });
});

module.exports = router;

Answer 1

The error was actually in the back-end. I didn't allow cross origin

var express = require('express');
var router = express.Router();
let Datastore = require('@google-cloud/datastore')
const datastore = Datastore();
const query = datastore.createQuery('image');

router.get('/', function(req, res, next){
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

  datastore
  .runQuery(query)
  .then(results => {
    let tasks = results[0];
    console.log('Tasks:');
    tasks.forEach(task => {
      const taskKey = task[datastore.KEY];
      console.log(taskKey.id, task);
    });
    console.log(tasks);
    return res.send(tasks);
  })
  .catch(err => {
    console.error('ERROR:', err);
      return res.status(200).send({
      success: false
    });
  });
});

module.exports = router;

Answer 2

Tyler Sebastian answer in full. But let me explain it. Whenever u call api using fetch It return Promise it is basically async so it like "calling api and waiting for it response". So

let images = fetch('http://localhost:3000/datastore', {
    mode: "no-cors", // no-cors, cors, *same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, same-origin, *omit
});

This line images is Promise Object. When u call .then on it. It will response you when it finished fetching data from backend.

let images = fetch('http://localhost:3000/datastore', {  
    mode: "no-cors", // no-cors, cors, *same-origin
    cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
    credentials: "same-origin", // include, same-origin, *omit
}).then(response => response.json()); //1 This line of code
console.log(images); // 2 and this line of code

Line number 6 maybe execute before line number 5. I suggest you to read Promise , asynchronous code before. Here is better way to do that.

fetch('http://localhost:3000/datastore', {  
     mode: "no-cors", // no-cors, cors, *same-origin
     cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
     credentials: "same-origin", // include, same-origin, *omit
}).then(response => {
   printImages(response); //Note that this is not your data, images array will be deep down in response.response.data
}); 
printResponse = (response) => { 
   console.log(response);
}

Answer 3

I have concerns about your API endpoint... See my comments.

Regarding the component:

fetch is asynchronous - images is a Promise , not the actually response from the endpoint. You need to use component state

class Component extends React.Component {
  componentDidMount () {
    fetch('http://localhost:3000/datastore', {
      mode: "no-cors", // no-cors, cors, *same-origin
      cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
      credentials: "same-origin", // include, same-origin, *omit
    })
    .then(response => response.json())
    .then(images => this.setState({ images });
  }

  render () {
    const { images } = this.state // use this
    return <div> ... </div>
  }
} 

again this all assumes that the endpoint returns valid JSON.