Vue

Vue 天氣Ａpi

OpenWeatherMap
建立一個帳號，建立一個金鑰
https://openweathermap.org/

#使用fetch
${ import.meta.env.VITE_API_URL }，${ import.meta.env.VITE_API_KEY }為環境變數
請參閱

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script setup lang="ts">
import { ref, onMounted } from 'vue'
interface listType {
  dt?: number | null,
  message?: number | null,
  cnt?: number | null,
  list:any[]
}

interface weatherType {
  cod?: number|null,
  message?: number | null,
  cnt?: number | null,
  list: listType[]
}

const weathers = ref<any>();
const getData = async () => {
  const api = `${import.meta.env.VITE_API_URL}forecast?q=Taichung,tw&APPID=${import.meta.env.VITE_API_KEY }&lang=zh_tw&units=metric`
  try {
    const data = await fetch(api);
    if (!data.ok) {
      throw Error('fetch data 失敗');
    }
    if (data.status === 200) {
      weathers.value = await data.json();
      console.log(await data.json())
    }
  } catch (error) {
   // throw Error(error?:any)
  }
}
onMounted(() => {
  getData();
});
</script>