Итак, я перепробовал все и не могу понять, почему объект 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;process.on ('unhandledRejection', функция onError (err) {console.error (err);}); поместите это в свой код, попробуйте запустить приложение, оно покажет ошибки ...
Итак, я добавил код, и теперь данные отображаются в объекте сообщения, но этого не должно быть. спасибо за отправную точку!
извините, не понял ... вы имеете в виду, что изображения печатаются в журнале или в ответе на отдых. ?
Итак, теперь изображения отображаются в объекте на моем интерфейсе, когда я консоль записываю результаты из моего ajax. Данных раньше не было, но теперь они появляются.
похоже, что я понял проблему ... требуется время для вычисления изображений ... до тех пор, пока post api не будет зарегистрирован ... лучше переместить app.post за пределы цепочки обещаний ... поместите локальную переменную в файл, просто верните его в вызове post ... вы можете заменить это значение после завершения цепочки обещаний ... или установить локальную переменную, чтобы указать на ошибку, если цепочка обещаний имеет некоторую ошибку ...
Я пробовал это, к сожалению, ничего не меняет.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я считаю, что основная проблема заключается в том, что ваш вызов 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 обратно во внешний интерфейс.
Когда вы говорите, что не можете отправить данные из api обратно во внешний интерфейс, где, по вашей логике, приложение добирается до того, как информация не будет отправлена должным образом? Получаете ли вы console.info('IMAGES', images) на стороне сервера? И если да, то это console.info("AXIOS:", res), где вы не видите ожидаемых данных res?
Да, я не могу попасть в console.info («AXIOS:», res). Я получаю две ошибки: POST localhost: 5000 / сообщений 404 (не найдено) и Uncaught (в обещании) Ошибка: запрос завершился неудачно с кодом состояния 404.
Хорошо, я все еще думаю, что проблема связана с тем, где определен маршрут /images, и я все еще не вижу причин для определения маршрута images, как у вас, поскольку нужные данные фактически извлекаются маршрутом /tag. Если вы действительно хотите использовать маршрут /images, вам нужно будет определить его отдельно и передать ему информацию в пост-вызове, чтобы он знал, какие изображения получить. Вместо этого я бы обновил интерфейс, чтобы обрабатывать данные из маршрута тега, поскольку именно здесь вы выполняете вызов tumlr. Я обновил свой ответ, чтобы показать, как я предлагаю вам упростить компонент на стороне клиента.
журналы печатаются правильно? вы пробовали проверить остальные api с помощью клиентских инструментов отдыха, таких как почтальон?