У меня возникла проблема с моей выборкой, возвращающей любые данные с сервера, и я не могу понять, почему.Fetch() не возвращает данные с сервера в ответ
Я думал, может быть, обещание было разрешено до того, как сервер отправил обратно какой-либо JSON, поэтому я недавно обновил свою модель, чтобы использовать обещания. Я новичок в обещаниях, и API-интерфейс Fetch несут меня.
Я готов вернуться тоже обратные вызовы и кладу
Player.findиPlayer.createметоды обратно в наPlayers.jsмаршрут и избежать обещаний на стороне сервера в целом.
модель игрок (после добавления обещания)
// require mongoose for data modeling
import mongoose from 'mongoose';
import Q from 'q';
const Schema = mongoose.Schema;
// define player schema
const PLAYER_SCHEMA = new Schema({
name: String,
score: Number
});
PLAYER_SCHEMA.statics.createPlayer = (name, score) => {
const deferred = Q.defer();
Player.create({
name,
score,
}, (error, player) => {
if (error) {
deferred.reject(new Error(error));
}
deferred.resolve(player);
});
return deferred.promise;
}
PLAYER_SCHEMA.statics.getPlayers =() => {
const deferred = Q.defer();
Player.find({})
.sort({
score: 'desc'
})
.limit(5)
.exec((error, players) => {
if (error) {
deferred.reject(new Error(error));
}
deferred.resolve(players);
});
return deferred.promise;
}
let Player = mongoose.model('Player', PLAYER_SCHEMA);
// first param is the singular name for the collection,
// mongoose automatically looks for the plural version
// so our db will have a 'players' collection
export default Player;
Route (после добавления обещания)
// dependencies
import express from 'express';
import Player from '../models/player';
const ROUTER = express.Router();
ROUTER.post('/', (req, res) => {
const name = req.body.name;
const score = req.body.score;
const promise = Player.createPlayer(name, score);
promise.then((response) => {
res.status(201).json(response);
}).catch((err) => {
res.send(err)
});
});
ROUTER.get('/', (req, res) => {
const promise = Player.getPlayers();
promise.then((response) => {
console.log(response);
res.status(200).json(response);
}).catch((err) => {
res.send(err)
});
});
export default ROUTER;
Тестирования этих конечных точек отлично работает в Почтальон, поэтому я предполагаю вопрос не лежит на сервере.
Здесь я подозреваю, что у меня есть проблема.
Client.js (где хранятся методы AJAX)
function createPlayer(playerData, onError, cb) {
return fetch('/api/players', {
method: 'post',
body: JSON.stringify(playerData),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(checkStatus)
.then(cb)
.catch(onError);
}
function getPlayers(success, onError) {
return fetch('/api/players', {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then(checkStatus)
.then(parseJSON)
.then(success)
.catch(onError);
}
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return response;
} else {
const error = new Error(`HTTP Error ${response.statusText}`);
error.status = response.statusText;
error.response = response;
throw error;
}
}
function parseJSON(response) {
return response.json();
}
const Client = {
createPlayer,
getPlayers
};
export default Client;
App.jsx (много кода опущена)
// все остальные коды опущены
const playerData = {
name,
score: this.state.totalScore,
};
client.createPlayer(playerData,
(err) => {
// TODO: improve error message
console.log(err);
},
client.getPlayers((data) => {
// array of objects containing all but most recent entry
console.log(data);
this.setState({
inputScreen: false, // hide the input screen
highScoreScreen: true, // show the high score screen
yeti: yetiWin,
highScores: [...this.state.highScores, ...data],
});
}, (err) => {
// TODO: improve this error message
console.log(err);
})
);
// все остальные коды опущены
Переменная данных никогда не содержит вновь созданного игрока, но содержит других игроков. Таким образом, операции создания и чтения работают на стороне сервера. Когда я изменить мой App.jsx к чему-то, как показано ниже:
App.jsx (испытание)
const playerData = {
name,
score: this.state.totalScore,
};
client.createPlayer(playerData,
(err) => {
// TODO: improve error message
console.log(err);
},
(res) => {
// should contain something like:
// {
// "__v": 0,
// "_id": "5881922f441fda40ccc52f83",
// "name": "player name",
// "score": "123"
// }
// right?
console.log(res.json());
console.log(res);
console.log(res.body);
}
);
При входе res.jsonres и res.body я получаю:
Promise {[[PromiseStatus ]]: «ожидающий», [[PromiseValue]]: undefined}
Response {type: "basic", url: "http://localhost:3000/api/players», состояние: 200, хорошо: правда, его статуса: "OK" ...}
ReadableStream {}
Когда я проверить мою POST конечную точку (http://localhost:3001/api/players) в почтальона сервер отвечает на объект JSON, содержащий данные, которые я хочу. По какой-либо причине client.createPlayer не возвращает данные с сервера. Конечно, это только часть проблемы.
В теории, когда мои client.createPlayer рассасывается и я призываю client.getPlayers как обратный вызов client.createPlayer, что метод должен возвращать данные, которые я хочу включая недавно созданный игрок, не так ли?
Однако, похоже, это не так.
Что я делаю неправильно?
этот 'http: // localhost: 3001' выглядит подозрительно ... Я принимаю его' http: // localhost: 3001' также где загружается страница, на которой выполняется запрос, а не с другого хоста, например 'http: // localhost: 80' или что-то - я вижу, что ваш URL-адрес в выборке - это' '/ api/players'', так что это код ACTUAL, вы ничего не удалили только для вопроса, это не Запрос «креста происхождения», не так ли? –
@JaromandaX Я использую приложение create-response-app, поэтому клиентский сервер работает на localhost: 3000, а экспресс-сервер работает на localhost: 3001. Клиент настроен на запросы прокси на localhost: 3001. –
ОК - просто убедитесь, что это не проблема CORS –