vue3使用axios获取json数据
时间: 2024-09-23 18:14:12 浏览: 84
vue+axios+获取本地JSON,能量树能量收集
在Vue3中,Axios是一个常用的HTTP库,可以方便地与后端服务器进行通信,获取JSON数据。首先你需要安装axios库,如果你使用的是Vue CLI,可以在`main.js`或`.env.js`文件中安装:
```bash
npm install axios
# 或者
yarn add axios
```
然后在组件里,你可以创建一个实例并使用它来发送GET请求:
```javascript
import { ref, onMounted } from 'vue';
import axios from 'axios';
export default {
setup() {
const loading = ref(false); // 加载状态
const data = ref(null); // 存放数据
// 在挂载阶段发起请求
onMounted(async () => {
try {
loading.value = true; // 设置加载状态
const response = await axios.get('你的API地址');
if (response.data) {
data.value = response.data;
}
} catch (error) {
console.error('Error fetching data', error);
} finally {
loading.value = false; // 请求结束后关闭加载状态
}
});
return {
loading,
data,
// ...其他组件需要的数据或方法
};
},
}
```
在这个例子中,`onMounted`钩子会在组件渲染完成后执行,通过`axios.get()`方法异步获取数据,如果成功获取到数据,则更新`data`数据。记得替换`'你的API地址'`为实际的后端接口URL。
阅读全文