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 // 将返回的列表数据赋值给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存储方式和后端要求进行适配。
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值