如何让客户端在发送信息后等待服务器的响应

Question

//Server side code
app.post("/handle-coordinates", async function (req, res) {
var config = {
method: 'get',
url: `https://maps.googleapis.com/maps/api/distancematrix/json?origins=${req.body.coordinates.lat}, ${req.body.coordinates.long}&destinations=${req.body.coordinates.lat2},${req.body.coordinates.long2}&units=imperial&key=KEY`,
headers: {}
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data.rows[0].elements[0].distance.text));
res.send(response.data.rows[0].elements[0].distance.text);
})
.catch(function (error) {
console.log(error);
});
})

app.listen(4242, () => console.log(`Node server listening on port ${4242}!`));

//Client side code
var form = document.getElementById("form")
var origin = document.getElementById("origin")
var destination = document.getElementById("destination")

form.addEventListener('submit', function(event) {
var formSubmitted = true
event.preventDefault();
console.log("submitted");
var formData = {
lat: document.getElementById("lat").value,
long: document.getElementById("long").value,
lat2: document.getElementById("lat2").value,
long2: document.getElementById("long2").value,
};
console.log(formData);
fetch('/handle-coordinates', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ coordinates: formData })
}).then(function(result) {
console.log(result)
})
origin.value = ""
destination.value = ""
});

在这段代码中，我的客户端在/handle-coordinates端点上向我的服务器发送2对纬度和经度坐标。我的服务器成功地向google maps api发送请求，然后从google maps api响应中检索距离。然后将其发送回/handle-coordinates端点。使用inspect，我可以成功地看到/handle-coordinates端点在其页面上有里程数。我的目标是将里程数记录到控制台。

我试过使用

.then(function(result) {
console.log(result)
})

但是结果是:Response {type: 'basic'， url: 'http://localhost:4242/handle-coordinates'， redirected: false, status: 200, ok: true，…}身体：(...(bodyUsed：假头：标题{}好吧：真正的重定向：假状态：200statusText："OK"类型："basic"url："http://localhost: 4242/handle-coordinates"

修改后的结果图像

Answer 1

fetch API的规范要求promise解析包含一个Response对象。根据MDN文档，有几种不同的实例方法可用于提取主体:

Response.formData()

返回一个承诺，使用响应体的FormData表示进行解析。

Response.json()

返回一个承诺，将响应体文本解析为JSON的结果。

Response.text()

返回一个承诺，该承诺使用响应体的文本表示形式进行解析。

我怀疑你在找Response.json()。

我也会重构你的实现，使用async/await语法:

客户端:

const origin = document.getElementById("origin");
const destination = document.getElementById("destination");
let formSubmitted = false;
const handleSubmit = async (event) => {
formSubmitted = true;
event.preventDefault();
const formPayload = {
lat: document.getElementById("lat").value,
long: document.getElementById("long").value,
lat2: document.getElementById("lat2").value,
long2: document.getElementById("long2").value,
};
try {
const response = await fetch('/handle-coordinates', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ coordinates: formData })
});
const responseJson = await response.json()
console.log(responseJson);
origin.value = ""
destination.value = ""
} catch (error) {
console.log('Error submitting form: ', error);
}
}
form.addEventListener('submit', (event) => handleSubmit(event));

服务器端:

try {
const { data } = await axios(config);
res.json({ distance: data.rows[0].elements[0].distance.text });
} catch (error) {
console.log(error);
res.status(500).end();
}