#node.js #json #express #vue.js
#node.js #json #экспресс #vue.js
Вопрос:
Я новичок в Express / APIs, и я пытаюсь отправить массив объектов JSON с сервера на клиент…вот простой пример:
На стороне сервера (экспресс, файл маршрутизатора)
router.get('/test', function(req, res, next) {
var testData = ["{'field' : 'a'}", "{'field' : 'b'}", "{'field' : 'c'}"]
console.log(testData)
res.send(testData)
})
Сначала я строкую JSON, а затем объединяю их в массив перед отправкой ответа… теперь на стороне клиента…
На стороне клиента (Vue, getTest запускается кнопкой, и я пока просто проверяю журнал)
methods : {
getTest: async () => {
let testData = await axios.get('http://localhost:3000/test',[])
console.log(testData)
}
}
Здесь я извлекаю массив JSON из API и просто хочу увидеть их в консоли. Это возвращает только пустую строку следующим образом:
{data: "", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
Есть идеи? Прошу прощения, если я упускаю что-то основное.
Обратите внимание, что я не буду знать длину массива, который я отправляю из API заранее.
Ответ №1:
Первое, что вы можете сделать на стороне сервера, это использовать res.json() insted res.send() для ответа json
РЕДАКТИРОВАТЬ: здесь ссылка на документацию https://expressjs.com/fr/api.html#res.json
Ответ №2:
сначала вы можете сказать, что выдает каждый из этих «console.log», чтобы мы могли его отладить? Я поместил ваш API на свой собственный сервер express и получил этот ответ, который в порядке
0 "{'field' : 'a'}"
1 "{'field' : 'b'}"
2 "{'field' : 'c'}"
и извлек его в моем приложении Vue и получил этот ответ:
config: Object { url: "http://localhost:3000/test", method: "get", timeout: 0, … }
data: (3) […]
0: "{'field' : 'a'}"
1: "{'field' : 'b'}"
2: "{'field' : 'c'}"
length: 3
<prototype>: Array []
headers: Object { "content-type": "application/json; charset=utf-8" }
request: XMLHttpRequest { readyState: 4, timeout: 0, withCredentials: false, … }
status: 200
statusText: "OK"
итак, из того, что я вижу, в вашем коде все в порядке; Я не думаю, что вам нужно что-то менять в своем коде. это может быть связано с вашей конфигурацией, и, опять же, если вы сообщите нам, что регистрируют ваши приложения, мы можем обнаружить проблему.
Комментарии:
1. Большое вам спасибо за помощь в этом. Консоль на стороне сервера сообщает: ‘[ «{‘field’: ‘a’}», «{‘field’: ‘b’}», «{‘field’: ‘c’}» ] GET / test 200 3,749 мс — -‘ На стороне клиента это выглядит аналогичнов вашем журнале только поле данных является пустой строкой. конфигурация: {url: » localhost:3000 / test «, метод: «get», заголовки: {…}, transformRequest: Array(1), transformResponse: Array(1), …} данные: «» статус: 200 statusText: «OK»
2. Интересно, что когда я перехожу к localhost:3000 / test, я не вижу ошибок, но в ответ не отправляются данные. Просто пустой экран. Res.send(‘test’) отображает ‘test’ на этой странице, а Res.send({‘a’:’test’}) корректно отображает json. Но когда я делаю повторную отправку ([‘a’,’b’]) Я ничего не получаю в ответе.
3. Повозившись еще немного, я попробовал: res.send({‘b’: [‘a’] }) , который на самом деле отправляет что-то, но не то, что я ожидал. Log :::: {«b»:{«b»:»a»}} Но если я немного изменю его на res.send({‘whyisntthisworking’: [‘a’] }) , он больше не работает.
4. я вижу, что вы использовали здесь
res.send(testData), и я сделал то же самое в своем коде, который работал нормально, потому что вы отправляете переменную testData, которая представляет собой массив объектов. Я не понимаю, как ваш код может нормально работать со мной, но он не работает для вас. Я не могу придумать ничего, чтобы решить эту проблему. но просто знайте, что ваш код в порядке. Это должно быть в ваших экспресс-конфигурациях или что-то в этом роде.
Ответ №3:
Вы пытались изменить свой метод на интерфейсе таким образом?
methods : {
getTest: async () => {
// use promise instead
await axios.get('http://localhost:3000/test',[]).then((resp) => {
let testData = resp.data
console.log(testData)
}).catch((err) => {
console.log('oopss..')
})
}
}