客戶端發送信息后如何讓客戶端等待服務器響應

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 對緯度和經度坐標。 我的服務器成功向谷歌地圖 api 發送請求，然后從谷歌地圖 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, …} body: (... ) bodyUsed: false headers: Headers {} ok: true redirected: false status: 200 statusText: "OK" type: "basic" url: "http://localhost:4242/handle-coordinates"

更改后的結果圖像

Answer 1

你為什么不在結果上調用.json() ？

Answer 2

獲取 API 的規范要求 promise 分辨率包含Response object 。 根據 MDN 文檔，有幾種不同的實例方法可用於提取正文：

Response.formData()

返回一個 promise，它使用響應主體的 FormData 表示進行解析。

Response.json()

返回一個 promise，解析響應正文的結果為 JSON。

Response.text()

返回一個 promise，它解析為響應正文的文本表示形式。

我懷疑您正在尋找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 })
    });

    console.log(response.json());
    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();
}