vue 如何使用Fetch
时间: 2024-04-23 13:27:44 浏览: 17
在 Vue 中使用 Fetch API 可以进行网络请求。以下是一个简单的示例:
```vue
<template>
<div>
<button @click="fetchData">Fetch Data</button>
<ul>
<li v-for="item in data" :key="item.id">{{ item.title }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
data: [],
};
},
methods: {
fetchData() {
fetch('https://api.example.com/data')
.then((response) => response.json())
.then((data) => {
this.data = data;
})
.catch((error) => {
console.error(error);
});
},
},
};
</script>
```
在上面的代码中,当点击按钮时,`fetchData` 方法会使用 Fetch API 发起 GET 请求到指定的 URL。然后,通过 `.json()` 方法将响应转换为 JSON 格式的数据。最后,将获取的数据赋值给 `data` 属性,以便在模板中展示。
请注意,在实际开发中,你可能还需要处理错误、添加请求头、发送 POST 请求等其他操作。这里只是一个基本示例,你可以根据具体需求进行扩展。