训练营和代码沙盒挑战告诉我 axios 未定义

Question

我不知道我的代码哪里出错了。 挑战是在页面的 h1 中显示我所在位置的当前温度，但我的控制台告诉我 axios 未定义。 我不确定是因为我使用的是代码沙箱还是我的代码中缺少错误。 谢谢

JS

function showTemperature(response) {
  console.log();
  let temperature = Math.round(response.data.main.temp);

  let heading = document.querySelector("h1");
  heading.innerHTML = `The outside temperature is ${temperature}℃`;
}

function retrievePosition(position) {
  let latitude = position.coords.latitude;
  let longitude = position.coords.longitude;
  let units = "metric";
  let apiKey = "cb64da9857db4762d73f7ab9b0ccec88";
  let apiEndpoint = "http://api.openweathermap.org/data/2.5/weather";
  let apiUrl = `${apiEndpoint}?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=${units}`;
  console.log(apiUrl);

  axios.get(apiUrl).then(showTemperature);
}
navigator.geolocation.getCurrentPosition(retrievePosition);

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>She Codes Plus</title>
    <meta charset="UTF-8" />
    <link href="src/styles.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  </head>

  <body>
    <img src="images/logo.png" alt="She Codes Plus Logo" class="logo" />
    <h1>JavaScript Geolocation API</h1>

    <h3>JS Challenge 1</h3>
    <p>Log your current latitude and longitude using the Geolocation API</p>

    <h3>JS Challenge 2</h3>
    <p>Log the current temperature where you are.</p>

    <h3>JS Challenge 3</h3>
    <p>
      Change the h1 of this page by the current temperature
    </p>

    <script src="src/index.js"></script>
  </body>
</html>

Answer 1

你安装Axios了吗？ 我认为您没有将 Axios 导入到您的文件中。

npm install axios

import axios from 'axios';