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

Question

I don't know where my code is going wrong. The challenge is to display the current temperature of my location in the h1 of the page but my console is telling me axios is not defined. I am not sure if it is because I am using codesandbox or if there is an error I am missing in my code. Thanks

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

Have you installed Axios? I don't think you are importing Axios to your file.

npm install axios

import axios from 'axios';