vue3调用接口获取数据
时间: 2023-06-25 07:07:26 浏览: 107
在 Vue3 中调用接口获取数据可以使用 axios 这个库。首先需要在项目中安装 axios:
```
npm install axios --save
```
然后在需要使用的组件中引入 axios:
```
import axios from 'axios'
```
接着可以在 methods 中定义一个获取数据的方法:
```
methods: {
getData() {
axios.get('/api/data').then(response => {
// 处理返回的数据
console.log(response.data)
}).catch(error => {
// 处理异常情况
console.log(error)
})
}
}
```
在这个例子中,我们使用了 axios 的 get 方法来获取数据,调用接口的 URL 是 /api/data。当数据成功返回时,我们可以在 then 方法中处理返回的数据;当发生异常时,我们可以在 catch 方法中处理异常情况。
需要注意的是,在 Vue3 中,可以使用 setup 函数来定义组件的逻辑,因此也可以在 setup 函数中调用接口来获取数据。例如:
```
import axios from 'axios'
export default {
setup() {
const getData = async () => {
try {
const response = await axios.get('/api/data')
console.log(response.data)
} catch (error) {
console.log(error)
}
}
return {
getData
}
}
}
```
在这个例子中,我们使用了 async/await 语法来调用接口,并且在 setup 函数中返回了一个包含 getData 方法的对象。在模板中,可以直接使用 getData 方法来触发获取数据的逻辑。