javascript - 使用 async 和 axios 制作天气应用

Question

我相当确定这是一个我不记得如何修复的细节，但我已经获得了从 URL 提取数据的代码，但我无法调用 setResults() 方法。我确信有办法解决它，但我不确定如何去做。

 class Test {
        constructor() {
            this.testResults = document.getElementsByClassName('test-results');
        }

        async run() {
            console.log(new Date().toISOString(), '[Test]', 'Running the test');

            // TODO: Make the API call and handle the results
            const url = `http://api.openweathermap.org/data/2.5/weather?q=${query}&appid=25e989bd41e3e24ce13173d8126e0fd6&units=imperial`;
            //Using the axios libary to call the data and log it. 
            const getData = async url => {
                try {
                    const response = await axios.get(url);
                    const data = response.data;
                    console.log(data);
                    var results  = data;
                } catch (error) {
                    console.log(error);
                }
            };
            getData(url);

        }    
        setError(message) {
            // TODO: Format the error
            this.testResults.innerHTML = (message || '').toString();
        }

        setResults(results) {
            results = responses()
            this.testResults.innerHTML = (results || '').toString();
        }

    }

Answer 1

您没有看到的错误可能与 testResults 是 HTMLCollection 而不是 HTMLElement 有关。因此，为了使 setResults 方法正常工作，您需要对其进行调整。我在这里提供一个可能的解决方案。

class Test {
    testResults; 
    constructor() {
        this.testResults = document.getElementsByClassName('test-results');
    }

    async run() {
        console.log(new Date().toISOString(), '[Test]', 'Running the test');
        // TODO: Make the API call and handle the results
        const url = `http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=25e989bd41e3e24ce13173d8126e0fd6&units=imperial`;
        //Using the axios libary to call the data and log it.
        const getData = async url => {
            try {
                const response = await axios.get(url);
                const data = response.data;
                this.setResults(data);
            } catch (error) {
                console.log(error);
            }
        };
        getData(url);
    }
    setError(message) {
        // TODO: Format the error
        this.testResults[0].innerHTML = (message || '').toString();
    }

    setResults(results) {
        results = JSON.stringify(results);
        for(let resultEl of this.testResults) {
            resultEl.innerHTML = (results || '').toString();
        }
        // this.testResults[0].innerHTML = (results || '').toString();
    }

}

let testObj = new Test();
testObj.run();