訓練營和代碼沙盒挑戰告訴我 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';

訓練營和代碼沙盒挑戰告訴我 axios 未定義

問題描述

1 個解決方案

解決方案1
-1 2021-01-25 18:48:08

訓練營和代碼沙盒挑戰告訴我 axios 未定義

問題描述

1 個解決方案

解決方案1 -1 2021-01-25 18:48:08

解決方案1
-1 2021-01-25 18:48:08