目录
背景:
如果想在页面刚加载时向后端发送请求,可以使用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 // 将返回的列表数据赋值给dataList console.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存储方式和后端要求进行适配。