安裝
1
| npm install axios --save
|
Vite 環境變數使用方式
- 引入axios import axios from 'axios'
- 新增interface listType
- 定義list 為陣列 const lists = ref([]);
- 使用 async ...await
- try ...catch
- 環境變數的使用：反斜線與${import.meta.env.環境變數的名稱} 例如：`${import.meta.env.VITE_API_URL}/api/questions`
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
37
38
39
40
41
42
43
44
45
46
47
48
| <script setup lang="ts">
import { ref,onMounted } from 'vue'
import axios from 'axios'
interface listType {
UID?: string;
category?: string;
comment?: string;
descriptionFilterHtml?: string;
discountInfo?: string | any;
editModifyDate?: string;
endDate?: string;
hitRate?: number;
imageUrl?: string;
masterUnit?: object;
otherUnit?: object;
showInfo?: object;
showUnit?: string;
sourceWebName?: string | any;
sourceWebPromote?: string;
startDate?: string | any;
subUnit?: object;
supportUnit?: object;
version?: string;
title?: string | any;
webSales?: string;
}
const lists = ref<listType[]>([]);
const getData = async () => {
try {
const api = `${import.meta.env.VITE_API_URL}/frontsite/trans/SearchShowAction.do?method=doFindTypeJ&category=200`;
await axios.get(api)
const res = await axios.get(api);
console.log('culture', res.data, typeof res.data[0].masterUnit
, 'otherUnit', typeof res.data[0].otherUnit, 'showInfos', typeof res.data[0].showInfo);
if (res.status === 200) {
lists.value = res.data;
}
} catch (error) {
console.log(error)
}
}
onMounted(() => {
getData();
})
</script>
|
github 說明-axios 安裝與使用
github 說明-axios 安裝與使用