如何让用户输入以获取 api url？

Question

//OpenWeather Info
const weatherKey = '*********';
const weatherURL = 'https://api.openweathermap.org/data/2.5/weather'

//Page Elements
const input = document.querySelector("#input").value;
const button = document.querySelector('#submit');

//Fetch
const getWeather = async () => {
    try {
        const apiURL = weatherURL+ "?&q=" + input + "&APPID=" + weatherKey;
        console.log(apiURL);
        const response = await fetch(apiURL);
        if (response.ok) {
            const jsonResponse = await response.json();
            console.log(jsonResponse);
            return jsonResponse;
        } else {
            console.log("request failed!");
        }
    } catch (error) {
        console.log(error);
    }
**}**

const renderWeather = (data) => {
    document.querySelector("#weather-degrees").innerHTML = data.main.temp;
}

const executeSearch = () => {
    getWeather().then(data => renderWeather(data));
}

button.addEventListener('click', executeSearch());

我在文本框中输入时无法获取输入值，也无法获取 apiURL。在我输入任何内容之前，控制台就给了我这个。有什么帮助吗？ console logs

Answer 1

您的 input 已预先设置一次。相反，做类似的事情：

const input = document.querySelector("#input");
// ...
const apiURL = weatherURL+ "?&q=" + input.value + "&APPID=" + weatherKey;
// or using a template literal
const apiURL = `${weatherURL}?&q=${input.value}&APPID=${weatherKey}`;

请注意，您还应该 URL encode 输入。

由于input现在只设置了一次，所以它被设置为一个空字符串。您可以直接访问 API url，即 https://api.openweathermap.org/data/2.5/weather?APPID=82510feaa0c1d3a300a7a754ff134404&q= 并注意它不起作用。如果您将 q= 替换为适当的值，例如q=London，它将正常工作。

请注意，如果您向 API 传递一个无效城市，它也会 return 一个 400 错误（但带有不同的错误消息）。从响应正文中读取错误并向用户正确显示有关无效输入的错误。

如何让用户输入以获取 api url？

How do I get the users input to fetch the api url?

javascript

api

input

weather-api

fetch-api