Не уверен, почему res.send не отправляет мой объект во внешний интерфейс

Итак, я перепробовал все и не могу понять, почему объект 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.handleChangeEvent = this.handleChangeEvent.bind(this);
  	this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeEvent(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.info('in sendtag'))
				} else {
					reject (error)
				}
		}))
		.then(() => {
			 axios.post('/images')
			 .then(res => {
			 	console.info("AXIOS:", res)
			 		this.setState({images: res})
			 })
		})
		.then((res) => {
		  console.info('IMAGES:', this.state);
		})
    .catch((error) => {
	    console.info(error);
	  });

		sendTag()

  }

	render (){
		return (
			<div>
				<form onSubmit = {this.handleSubmit}>
	          <input type = "text" 
	          onChange = {this.handleChangeEvent} 
	          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.info('TAG', tag)
    	console.info('tumble api')
      client.taggedPosts(tag, (error, data) => {
				if (data){
					console.info('data recieved')
					resolve(data)
				} else {
					reject (error)
					console.info('tumble api error')
				}
			})
    });
}).then(function(result){
    return new Promise(function(resolve, reject){
    	console.info('image to new variable')
    	const images = result
    	if (images){
    		resolve (images)
    	} else {
    		reject (error)
    	}
    })
}).then(function(images){
		console.info('send api')
   console.info('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.info('Server running on localhost 5000!'));

module.exports = app;

журналы печатаются правильно? вы пробовали проверить остальные api с помощью клиентских инструментов отдыха, таких как почтальон?

Shivaji Varma 25.04.2018 03:45

process.on ('unhandledRejection', функция onError (err) {console.error (err);}); поместите это в свой код, попробуйте запустить приложение, оно покажет ошибки ...

Shivaji Varma 25.04.2018 03:48

Итак, я добавил код, и теперь данные отображаются в объекте сообщения, но этого не должно быть. спасибо за отправную точку!

Nakima Kanashita 25.04.2018 03:53

извините, не понял ... вы имеете в виду, что изображения печатаются в журнале или в ответе на отдых. ?

Shivaji Varma 25.04.2018 03:56

Итак, теперь изображения отображаются в объекте на моем интерфейсе, когда я консоль записываю результаты из моего ajax. Данных раньше не было, но теперь они появляются.

Nakima Kanashita 25.04.2018 03:57

похоже, что я понял проблему ... требуется время для вычисления изображений ... до тех пор, пока post api не будет зарегистрирован ... лучше переместить app.post за пределы цепочки обещаний ... поместите локальную переменную в файл, просто верните его в вызове post ... вы можете заменить это значение после завершения цепочки обещаний ... или установить локальную переменную, чтобы указать на ошибку, если цепочка обещаний имеет некоторую ошибку ...

Shivaji Varma 25.04.2018 04:04

Я пробовал это, к сожалению, ничего не меняет.

Nakima Kanashita 25.04.2018 04:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
7
942
1

Ответы 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.info('TAG', tag)
    console.info('tumble api')
    client.taggedPosts(tag, function(error, data) {
        if (!data) {
            console.info('tumble api error');
            return res.send(error);
        }
        console.info('data recieved', data);
        console.info('image to new variable')
        const images = data;
        console.info('sending images');
        console.info('IMAGES', images);
        res.send(images);
    });
});

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

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

Спасибо. Проблема в том, что я отправляю тег на свой сервер, чтобы использовать его с api tumblr, а затем отправить эти данные обратно клиенту. Пока что теги и tumblr api работают, но по какой-то причине я не могу отправить данные из api обратно во внешний интерфейс.

Nakima Kanashita 25.04.2018 04:26

Когда вы говорите, что не можете отправить данные из api обратно во внешний интерфейс, где, по вашей логике, приложение добирается до того, как информация не будет отправлена ​​должным образом? Получаете ли вы console.info('IMAGES', images) на стороне сервера? И если да, то это console.info("AXIOS:", res), где вы не видите ожидаемых данных res?

billbitt 25.04.2018 04:34

Да, я не могу попасть в console.info («AXIOS:», res). Я получаю две ошибки: POST localhost: 5000 / сообщений 404 (не найдено) и Uncaught (в обещании) Ошибка: запрос завершился неудачно с кодом состояния 404.

Nakima Kanashita 25.04.2018 04:42

Хорошо, я все еще думаю, что проблема связана с тем, где определен маршрут /images, и я все еще не вижу причин для определения маршрута images, как у вас, поскольку нужные данные фактически извлекаются маршрутом /tag. Если вы действительно хотите использовать маршрут /images, вам нужно будет определить его отдельно и передать ему информацию в пост-вызове, чтобы он знал, какие изображения получить. Вместо этого я бы обновил интерфейс, чтобы обрабатывать данные из маршрута тега, поскольку именно здесь вы выполняете вызов tumlr. Я обновил свой ответ, чтобы показать, как я предлагаю вам упростить компонент на стороне клиента.

billbitt 25.04.2018 17:32

Другие вопросы по теме