时间戳

首页 > 解决方案 > 使用小胡子渲染 [object Promise] 将来自 Axios 承诺的数据渲染成 HTML

javascript - 使用小胡子渲染 [object Promise] 将来自 Axios 承诺的数据渲染成 HTML

问题描述

我正在尝试从呈现为 HTML 的 API 获取数据。我通过以下方式向 API 发出请求：

const openWeatherMapApiUrl = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather";

async function getWeatherData() {
    try {
        const response = await axios.get(openWeatherMapApiUrl, {
            params: {
                q: "London,uk",
                appId: "956d289b64e4e226bdef9ce1f93b475b"
            }
        })
        console.log(response.data);
        return response.data;
    } catch (error) {
        console.error(error);
    }
}

从那里，我将该数据呈现到我的 HTML 中：

renderWeather = () => {
    var template = document.getElementById('template').innerHTML;
    var rendered = Mustache.render(template, {
        cityName: getWeatherData()
    });
    document.getElementById('target').innerHTML = rendered;
}

它不是渲染数据，而是渲染[object Promise]. 我知道这可能是由于承诺尚未兑现，因此我也尝试通过以下方式兑现：

getWeatherData().then((response) => {return response})以及它在不同地方的不同变体，但这仍然返回相同的[object Promise]响应。

标签： javascriptpromiseaxiosmustache

解决方案

getWeatherData返回一个需要await-ed 以获取数据的承诺，如果在内部报告错误，则getWeatherData重新抛出错误以通知调用者：

const openWeatherMapApiUrl = "https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather";

async function getWeatherData() {
    try {
        const response = await axios.get(openWeatherMapApiUrl, {
            params: {
                q: "London,uk",
                appId: "956d289b64e4e226bdef9ce1f93b475b"
            }
        })
        console.log(response.data);
        return response.data;
    } catch (error) {
        console.error(error);
        throw error;   // reject returned promise
    }
}

如果调用函数后要报错，可以简化为

function getWeatherData() {
    return axios.get(openWeatherMapApiUrl, {
            params: {
                q: "London,uk",
                appId: "956d289b64e4e226bdef9ce1f93b475b"
            }
        })
    }
}

await在 Promise 链中调用或处理时，这两个版本都需要-ed

getWeatherData()
.then( data => console.log(data))
.catch( err => console.error(err));

提供数据作为参数renderWeather有助于从异步代码中调用它：

renderWeather = (weatherData) => {
    var template = document.getElementById('template').innerHTML;
    var rendered = Mustache.render(template, {
        cityName: weatherData
    });
    document.getElementById('target').innerHTML = rendered;
}

推荐阅读