vue3怎么用fetch
时间: 2023-12-25 07:49:29 浏览: 16
在Vue3中,可以使用全局的fetch API来发送HTTP请求。fetch API是一个现代的、基于Promise的方式来发送HTTP请求的API,它可以在浏览器和Node.js中使用。
下面是一个例子,演示了如何使用fetch API来获取一个JSON文件:
```html
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
mounted() {
fetch('/data.json')
.then(response => response.json())
.then(data => {
this.message = data.message;
});
}
}
</script>
```
在这个例子中,我们在mounted钩子函数中使用fetch API来获取一个JSON文件。我们通过调用fetch函数来发送请求,并且在.then()回调函数中处理响应。在这个例子中,我们使用response.json()方法来将响应转换为JSON格式,并且在成功时将数据赋值给组件的data对象中的message属性。
在使用fetch API时,需要注意以下几点:
1. fetch API默认使用GET请求,如果需要发送其他类型的请求,需要在fetch函数的第二个参数中指定请求类型和请求头等信息。
2. fetch API返回一个Promise对象,需要使用.then()和.catch()方法来处理成功和失败的响应。
3. fetch API不会自动将服务器返回的数据转换为JSON格式,需要使用response.json()方法来手动转换。