Vite Fetch串接

Fetch

使用 Fetch 發送請求 ( request )
Fetch API 的 Response

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<template>
<div>
<router-view></router-view>
<a @click="addBlogItem">test</a>
<ul>
<li v-for="(item,UID) in lists" :key="UID">
{{ UID +1 }} {{ item.title }}
</li>
</ul>


</div>
</template>

<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`;
// 請求表頭
let headers = {
"Content-Type": "application/json",
"Accept": "application/json",
// Authentication: 'secret'
// "Authorization": `Bearer ${token}`,
}
const res = await fetch(api, { headers: headers, method: "GET" });
//res.json() =>把資料轉成JSON格式
lists.value = await res.json();
console.log('lists.value', lists.value)
} catch (error) {
console.log(error)
}
};
const addBlogItem = async () => {
try {
const api = `${import.meta.env.VITE_QUIZ_URL}/api/blog`

let headers = {
"Content-Type": "application/json",
"Accept": "application/json",
// "Authorization": `Bearer ${token}`,
}
//以下是API文件中提及必寫的主體参數
let body = {
"title": "Blog 1",
"subTitle": "Blog 1 sub",
"description": "description1"
}
fetch(api, {
method: "POST",
headers: headers,
//別忘了把主體参數轉成字串,否則資料會變成[object Object],它無法被成功儲存在後台
body: JSON.stringify(body)
})
.then(res => res.json())
.then(json => console.log('',json));
}
catch (error) {
console.log(error)
}
}
onMounted(() => {
getData();
})
</script>

github說明