* Отредактировано для ясности и отражения изменений:
Здравствуйте. Я изо всех сил пытаюсь понять, почему мои функции asyn c прекрасно работают по отдельности, и когда они объединены в цепочку, но не когда они объединены в цепочку и запущены в слушателе событий ....
стоит отметить: когда я пытаюсь запустить это без чётного прослушивателя, данные передаются из моего приложения через мой почтовый маршрут и в конечную точку так, как это должно быть, затем они возвращаются в мое приложение по правильному маршруту и т. д. c. Тем не менее, я получаю ошибку в консоли, которая говорит:
error SyntaxError: Unexpected token < in JSON at position 0
однако, когда я пытаюсь запустить свою цепочку асин c функций по щелчку элемента dom, я не получаю Выше ошибки, данные передаются на мой почтовый маршрут, я могу зарегистрировать опубликованный объект:
Object: null prototype] { zipcode: '97206', feel: 'confused' }
, но тогда мой сервер не сохраняет никаких данных, и мой маршрут get никогда не запускается, и ничего возвращается в мое приложение .......
я довольно потерян .....
полный сервер и код приложения ниже:
сервер:
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cors());
app.use(express.static('public'));
//test values
let projectData = {
date: "today",
temp: "38",
feelings: "confused"
};
app.get("/", (req, res) => {
});
app.post("/postData", (req, res) => {
console.log(req.body)
projectData = {
date: req.body.date,
temp: req.body.temp,
feelings: req.body.feelings
}
console.log("post route was hit, saved:", projectData);
res.redirect("/")
});
app.get("/getData", (req, res) => {
console.log("getData route was hit, sent: ", projectData)
res.send(projectData);
})
app.listen(3000, (req, res) => {
console.log("Listening on port 3000");
});
app
let newDate = getDate();
const apiKey = "5fd7b3a253e67a551e88ff34a92b9e02";
const baseURL = "http://api.openweathermap.org/data/2.5/weather?";
// zip=${}&APPID=${}&units=metric;
const userData = {};
// returns the date //
function getDate() {
let d = new Date();
let newDate = d.getMonth() + "." + d.getDate() + "." + d.getFullYear();
return newDate;
}
//constructs string for api call, adds temp to userData object
const getData = async (apiUrl, zip, key) => {
const url = `${apiUrl}zip=${zip}&APPID=${key}&units=metric`;
const result = await fetch(url);
try {
let newData = await result.json()
// console.log(newData.main.temp)
userData.temp = newData.main.temp
}catch(error) {
console.log("error", error);
}
}
// getData(baseURL, 97206, apiKey)
// .then(result => {
// console.log(userData)
// })
//saves contents of userData Object to server
const postData = async (url, data) => {
const result = await fetch(url, {
method: "POST",
credentials: "same-origin",
headers: {
"Content-type": "application/json"
},
body: JSON.stringify(data)
});
try {
const newData = await result.json();
// console.log(newData);
return newData;
} catch (error) {
console.log("error", error);
}
};
// postData('/postData', userData);
//updates interface with projectData values from server
const updateUI = async url => {
const result = await fetch(url);
try {
const newData = await result.json();
document.getElementById("date").innerHTML = newData.date;
document.getElementById("temp").innerHTML = newData.temp;
document.getElementById("feelings").innerHTML = newData.feelings;
} catch (error) {
console.log("error", error);
}
};
// updateUI("/getData")
// THIS WORKS
userData.date = newDate;
userData.feelings = document.getElementById("feel").value;
const zipCode = document.getElementById("zipcode").value;
getData(baseURL, 97206, apiKey).then(result => {
postData("/postData", userData).then(result => {
updateUI("/getData");
});
});
// THIS DOESNT WORK
// document.getElementById("btn").addEventListener("click", e => {
// userData.date = newDate;
// userData.feelings = document.getElementById("feel").value;
// const zipCode = document.getElementById("zipcode").value;
// getData(baseURL, zipCode, apiKey).then(result => {
// postData("/postData", userData).then(result => {
// updateUI("/getData");
// });
// });
// });
РЕДАКТИРОВАТЬ:
Я понял, что информация, которая проходила через почтовый маршрут, когда мои функции asyn c отключены прослушивателем событий на самом деле были просто значения элемента ввода формы, а не содержимое запроса на выборку / публикацию. после того, как я удалил атрибуты имени из входных данных формы, я не получаю никаких данных, попадающих в мой пост-маршрут ...... пока функция corosponding работает нормально, не в прослушивателе событий.
I ' м в тупик.