vue3如何打开页面即向后端发送请求

目录

背景：

实现：

1、使用

2、案例

补充：

1、如何定义一个集合来接受后端返回的list

2、加入请求头

---

背景：

如果想在页面刚加载时向后端发送请求，可以使用Vue 3的生命周期钩子函数onMounted来实现

实现：

1、使用

首先，确保你已经安装了Vue 3和相关依赖。

然后，在<script>标签中添加以下代码：

import { onMounted } from 'vue'onMounted(() => {// 发送请求的逻辑代码// 在此处编写与后端通信的请求逻辑
})

在上述代码中，onMounted是Vue 3提供的生命周期钩子函数之一。它会在组件挂载到DOM后立即执行回调函数中的代码。你可以在回调函数中编写与后端通信的请求逻辑。

2、案例

import { onMounted } from 'vue'
import axios from 'axios'onMounted(async () => {try {const response = await axios.get('/api/data') // 向后端发送GET请求获取数据console.log(response.data) // 打印返回的数据// 在这里可以对后端返回的数据进行处理，更新页面状态或执行其他操作} catch (error) {console.error('请求失败:', error)}
})

在上述示例中，：

• 使用了axios库来发送GET请求。当组件挂载到DOM后，onMounted回调函数会被触发，其中的代码会被执行。
• 在回调函数内部，使用axios.get方法发送了一个GET请求，URL为/api/data，这是一个示例接口地址，可根据你的实际情况修改为正确的后端接口URL
• 通过await关键字等待请求完成并得到响应结果，将其赋值给response变量
• 打印了响应数据response.data，可根据实际需求对数据进行处理。

补充：

1、如何定义一个集合来接受后端返回的list

import { onMounted, ref } from 'vue'
import axios from 'axios'onMounted(async () => {try {const dataList = ref([]) // 定义一个响应式的数组来接收后端返回的列表数据const response = await axios.get('/api/data') // 向后端发送GET请求获取数据dataList.value = response.data // 将返回的列表数据赋值给dataListconsole.log(dataList.value) // 打印接收到的列表数据// 在这里可以对接收到的列表数据进行处理，更新页面状态或执行其他操作} catch (error) {console.error('请求失败:', error)}
})

2、加入请求头

如果你在登录时获得了token，在后续的请求中需要使用该token进行身份验证。通常情况下，你可以将token放置在请求的头部（header）中进行传递。

import { onMounted } from 'vue'
import axios from 'axios'onMounted(async () => {try {const token = localStorage.getItem('token') // 假设你将token存储在localStorage中const response = await axios.get('/api/data', {headers: {Authorization: `Bearer ${token}`, // 在请求头部添加Authorization字段，并附上Bearer <token>格式的值},})console.log(response.data) // 打印返回的数据// 在这里可以对后端返回的数据进行处理，更新页面状态或执行其他操作} catch (error) {console.error('请求失败:', error)}
})

• 通过localStorage.getItem('token')从localStorage中获取存储的token。
• 然后，在发送GET请求时，我们通过headers参数将token添加到请求头部的Authorization字段中，采用Bearer Token的格式。
• 这样，后端服务器就能够从请求头部读取并验证token，用于身份认证和授权控制。可根据你实际的token存储方式和后端要求进行适配。