首页vue3+vite的axios的原生写法

vue3+vite的axios的原生写法

时间: 2023-07-29 13:06:41 浏览: 126

在Vue3和Vite中，可以使用axios库来进行网络请求。下面是使用axios的原生写法示例：首先，你需要安装axios库。在项目根目录下执行以下命令： ``` npm install axios ``` 然后，在你的Vue组件中，可以按照以下方式使用axios： ```vue <template> <div> <button @click="fetchData">发送请求</button> <div v-if="data">{{ data }}</div> </div> </template> <script> import { ref } from 'vue'; import axios from 'axios'; export default { setup() { const data = ref(null); const fetchData = async () => { try { const response = await axios.get('https://api.example.com/data'); data.value = response.data; } catch (error) { console.error(error); } }; return { data, fetchData, }; }, }; </script> ``` 在上面的例子中，我们通过点击按钮来发送请求，并在响应返回后将数据显示在页面上。`fetchData`函数使用`await`关键字来等待异步请求的结果，并将结果赋值给`data`变量。注意，在Vue3中，我们使用了`ref`来创建响应式的变量。这样，你就可以使用axios进行网络请求并处理响应了。当然，你也可以根据需要设置请求头、发送POST请求等等。具体的用法可以参考axios的官方文档：https://axios-http.com/docs/intro

阅读全文