使用小胡子渲染 [object Promise] 将来自 Axios promise 的数据渲染到 HTML

Question

我正在尝试从渲染到 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}) 和它在不同地方的不同变体，但这仍然是 returns 相同的 [object Promise] 响应。

Answer 1

getWeatherData returns 需要 await-ed 才能获取数据的承诺，如果在 getWeatherData re-throw 中报告错误通知来电者：

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"
            }
        })
    }
}

在像

这样的 Promise 链中调用或处理时，两个版本都需要 await-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;
}

使用小胡子渲染 [object Promise] 将来自 Axios promise 的数据渲染到 HTML

Rendering data from Axios promise into HTML with mustache rendering [object Promise]

javascript

promise

mustache

axios