我在开放天气图中的图标没有改变

Question

我无法改变我的图标，我知道我所做的是一团糟，请有人帮助我。 我在 cloudinary 中上传了我的图标，因为这是我知道在 stackblitz 中访问图像的唯一方法

fetch(api)
   .then(response => { return response.json(); })
   .then(data => {
       console.log(data.weather[0].icon)
       const {temp} = data.main;
       const {description} = data.weather[0];
       const {icon} = data.weather[0]; 
       temperatureDescription.textContent = description;
       temperatureDegree.textContent = Math.floor(temp - 273.15);
       locationTimezone.textContent = data.name;
       locationIcon = icon;
    })
    .then(function(){
        displayWeather();
        locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">`;
    });
})();

Answer 1

问题

你忘了返回icon从第二then显然没有从第二个将返回的数据then进入第三个then使用它们。

如何修复

从第二个返回icon或您的整个数据， then在third个上使用它：

fetch(api)
   .then(response => { return response.json(); })
   .then(data => {
       console.log(data.weather[0].icon)
       const {temp} = data.main;
       const {description} = data.weather[0];
       const {icon} = data.weather[0]; 
       temperatureDescription.textContent = description;
       temperatureDegree.textContent = Math.floor(temp - 273.15);
       locationTimezone.textContent = data.name;
       
       return icon  // -----> here
    })
    .then(function(icon){   // ----> pass the returned data to the function param to use it in this function
        displayWeather();
        locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">`;
    });
})();

可选

似乎third then 更改是多余的，您可以对第二个then执行相同操作，在此代码片段中，我删除了不需要的部分：

fetch(api)
   .then(response => response.json())
   .then(data => {
       const {temp} = data.main;
       const {icon, description} = data.weather[0];

       temperatureDescription.textContent = description;
       temperatureDegree.textContent = Math.floor(temp - 273.15);
       locationTimezone.textContent = data.name;
       locationIcon.innerHTML = `<img src="https://res.cloudinary.com/dybrtotf1/image/upload/v1634954533/icons/${icon}.png">`
       
       displayWeather();

   })
   .catch(error => console.log(error)) 
})();

注意：始终使用带有异步操作的catch块来捕获错误并在失败情况下执行正确的操作。 在这里，我刚刚记录了错误消息，您可以通过添加所需的功能来自定义此部分。