使用 async 和 axios 制作天气应用

Question

I'm fairly certain it's a detail that I can't remember how to fix, but I've gotten the code to pull the data from the URL, but I can't call the setResults() method. I'm sure there is a way around it but I'm unsure how to do it.

 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

The bug that you did not see is probably related to testResults being a HTMLCollection rather than HTMLElement . So in order to make the setResults method to work properly you need to adjust it. Here I'm providing a possible solution.

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();