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存储方式和后端要求进行适配。