TypeError：无法提取-Javascript Asyn问题

Posted 2023-01-12

我刚刚开始学习javascript。我目前正在学习异步js。我想使用AccuWeather API构建天气应用程序。但是它在控制台中不断抛出错误，无法正常工作

这里是错误

TypeError：无法获取

在我的目录中。我有

Index.html

...
  <link rel="stylesheet" href="style.css">
...
        <form class="change-location my-4 text-center text-muted">
          <label for="city">Enter a location for weather information</label>
          <input type="text" name="city" class="form-control p-4">
        </form>

...
  <script src="scripts/forecast.js"></script>
  <script src="scripts/app.js"></script>

app.js

//Select the form
const cityForm = document.querySelector('form');

//get city details & weather
const updateCity = async (city) => 

    const cityDets = await getCity(city);
    const weather = await getWeather(cityDets.key);

    //returns city and weather response
    return 
        cityDets: cityDets,
        weather: weather
    ;
;

//prevent default action
cityForm.addEventListener('submit', e => 
    e.preventDefault

    //trim any whitespace & get city value
    //cityForm.city.value = selection + input name + input value
    const city = cityForm.city.value.trim();

    //remove the previous entry
    cityForm.reset();

    //update the UI withcity info
    updateCity(city)
    .then(data => console.log(data))
    .catch(err => console.log(err));
);

在我的app.js中

const key = '*****************';

const getWeather = async (id) => 

    const base = 'http://dataservice.accuweather.com/currentconditions/v1/';
    const query = `$id?apikey=$key`;
    const response = await fetch (base + query);
    const data = await response.json();
    return data[0];


//get city information
const getCity = async (city) => 

    //base, apikey, cityname - 
    const base = 'http://dataservice.accuweather.com/locations/v1/cities/search';
    const query = `?apikey=$key&q=$city`;
    const response = await fetch(base + query);
    const data = await response.json();
    return data[0];
;

我不知道我在做什么错。

答案

尝试在提取调用后捕获错误：

const url = 'https://weatherapi/basepath'+key; //or whatever this is

fetch(url)
  .then(res => ...do stuff)
  .catch(err => console.log('ERROR', error)); //here