不确定为什么 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;

服务器.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 并在链的最后一个 .then 中调用 res.json ，它可能会起作用。但是，我不确定您的 /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();
}