не знаю, почему res.send не отправляет мой объект на передний конец

Question

Итак, я перепробовал все и не могу понять, почему объект tumblr не проходит через res.send в мой интерфейс. Кто-нибудь может помочь? Я тоже пробовал res.json, но это ничего не дает. Я получил ошибку в обещании, исключение было получено, но я не уверен, почему. Я предполагаю, что это связано с тем, что объект изображения не проходит.

import React from 'react';
import axios from 'axios';

class SearchBar extends React.Component {
	 constructor(props) {
    super(props);
    this.state = {tag: "", images: ''};

  	this.handleChange = this.handleChange.bind(this);
  	this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event){
  	this.setState({tag: event.target.value});
  }

	handleSubmit(event) {
    event.preventDefault();
    const sendTag = () => (
			new Promise((resolve, reject) => {
	     axios.post('/tag', {
		  		tag: this.state.tag,
			  })
	     if(this.state.tag){
					resolve(console.log('in sendtag'))
				} else {
					reject (error)
				}
		}))
		.then(() => {
			 axios.post('/images')
			 .then(res => {
			 	console.log("AXIOS:", res)
			 		this.setState({images: res})
			 })
		})
		.then((res) => {
		  console.log('IMAGES:', this.state);
		})
    .catch((error) => {
	    console.log(error);
	  });

		sendTag()

  }

	render (){
		return (
			<div>
				<form onSubmit={this.handleSubmit}>
	          <input type="text" 
	          onChange={this.handleChange} 
	          className="searchTerm" 
						placeholder="Enter a tag" />
	        <input type="submit" value="Submit" />
	      </form>
				<div className="grid-container">

				</div>
			</div>
		)
	}
}

export default SearchBar;

Server.js

//Express
const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
const port = process.env.PORT || 5000;

//TUMBLR I
const tumblr = require('tumblr.js');

//TOKENS
const secret = require('./secret/config.js');

//MIDDLEWARE
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '../frontend/public')));

//INITIATE API
const client = tumblr.createClient({
	consumer_key: secret.consumer_key,
	consumer_secret: secret.consumer_secret,
	token: secret.token,
	token_secret: secret.token_secret
});

// API
new Promise(function(resolve, reject){
    app.post('/tag', (req, res) =>{
    	const tag = req.body.tag
    	if(tag){
					resolve(tag)
				} else {
					reject (error)
				}
			})
}).then(function(tag){
    return new Promise(function(resolve, reject){
    	console.log('TAG', tag)
    	console.log('tumble api')
      client.taggedPosts(tag, (error, data) => {
				if(data){
					console.log('data recieved')
					resolve(data)
				} else {
					reject (error)
					console.log('tumble api error')
				}
			})
    });
}).then(function(result){
    return new Promise(function(resolve, reject){
    	console.log('image to new variable')
    	const images = result
    	if (images){
    		resolve (images)
    	} else {
    		reject (error)
    	}
    })
}).then(function(images){
		console.log('send api')
   console.log('IMAGES', images)
			app.post('/images', (req, res) => {
				res.json(images)
			})
})

// FRONTEND ROUTE
app.get('/', (req, res) => {
	res.sendFile(path.join(__dirname, '../frontend/index.html'));
});

//SERVER
app.listen(port, () => console.log('Server running on localhost 5000!'));

module.exports = app;

Answer 1

Я полагаю, что основная проблема заключается в том, что ваш res.json(images) вызов находится внутри объявления app.post, поэтому он будет срабатывать только в том случае, если клиент отправил запрос на сообщение /images. Если вы удалите app.post и просто вызовите res.json в вашей последней .then цепочке, это может сработать. Однако я не уверен, что ваш /tag маршрут настроен правильно. Я не вижу причин для цепочки обещаний или отдельного маршрута /tag и /image, потому что единственный асинхронный вызов, который вы делаете, это client.taggedPosts. Поэтому я бы порекомендовал вам определить свой маршрут /tag, а затем поместить всю логику в этот маршрут следующим образом:

// API
app.post('/tag', function (req, res) {
    const tag = req.body.tag;
    if (!tag) {
        return res.send('please provide a tag');
    };
    console.log('TAG', tag)
    console.log('tumble api')
    client.taggedPosts(tag, function(error, data) {
        if(!data) {
            console.log('tumble api error');
            return res.send(error);
        }
        console.log('data recieved', data);
        console.log('image to new variable')
        const images = data;
        console.log('sending images');
        console.log('IMAGES', images);
        res.send(images);
    });
});

Функция handleSubmit() на стороне клиента может быть обновлена ​​для использования ответа /tag следующим образом:

handleSubmit (event) {
    event.preventDefault();
    function sendTag () {
        axios
            .post('/tag', { tag: this.state.tag })
            .then( function(images) {
                console.log("AXIOS response:", images)
                this.setState({images: images})
            })
            .then(function () {
                console.log('state:', this.state);
            })
            .catch(function(error) {
                console.log(error);
            });
    }
    sendTag();
}