javascript 如何在后续请求中使用fetch请求返回的数据

nukf8bse 于 2023-08-02 发布在 Java

关注(0)|答案(1)|浏览(103)

我正在尝试显示用户将按名称搜索的城市的天气。我使用的第一个API是允许用户搜索的城市名称。这将返回一个带有lat和lon的数据对象，然后我将使用该数据对象运行第二个fetch请求，以获取由lat和lon搜索的城市的天气预报。这是我目前的代码，我已经工作了。

var citySearch = function() {

  inputFormEl = document.getElementById("city").value;
  const apiCall = `https://api.openweathermap.org/data/2.5/weather?&q=` + inputFormEl + apiKey;

  fetch(apiCall)
    .then(function(response) {
      response.json()
        .then(function(data) {
          console.log(data);

          var lat = data.coord.lat;
          var lon = data.coord.lon;
          getCity(data)

        })
    }).then(function() {
      var secCall = `https://api.openweathermap.org/data/2.5/onecall?lat=${Lat}&lon=${Lon}&appid=087ab696412a7356255185b8f55d9574`;
      fetch(secCall)
      console.log(secCall);
    })
}

字符串

JavaScript

来源：https://stackoverflow.com/questions/71833440/how-to-use-returned-data-from-a-fetch-request-in-a-follow-up-request

1条答案

按热度按时间

ua4mk5z41#

在每个then回调中，你应该 * 返回 * 你想要传递的信息--可以是一个promise，也可以只是一个值--以避免“回调地狱”的典型嵌套。
一旦你有了纬度和经度，就可以立即使用它来执行下一个fetch。
所以它变成了这样--我删除了你的appid：

fetch(apiCall)
  .then(function (response) {
    return response.json();
}).then(function (data) {
    console.log(data);
    getCity(data);
    let {lat, lon} = data.coord;
    // Just continue...
    var secCall = `https://api.openweathermap.org/data/2.5/onecall?lat=${Lat}&lon=${Lon}&appid=....`;
    console.log(secCall);
    return fetch(secCall);
}).then(function (response) {
    return response.json();
}).then(function (data) {
    console.log(data.current.weather[0].description);
});

字符串
使用async/await语法，所有这些都更容易：

(async function() {
    let response = await fetch(apiCall);
    let data = await response.json();
    console.log(data);
    getCity(data);
    let {lat, lon} = data.coord;
    var secCall = `https://api.openweathermap.org/data/2.5/onecall?lat=${Lat}&lon=${Lon}&appid=....`;
    console.log(secCall);
    let response2 = await fetch(secCall);
    let data2 = await response2.json();
    console.log(data2.current.weather[0].description);
})();

型

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 如何在后续请求中使用fetch请求返回的数据

1条答案

相关问题

热门标签

最新问答