对 axios 请求使用动态参数

Posted 2023-02-22

【中文标题】对 axios 请求使用动态参数

【英文标题】：use dynamic params for axios requests

【发布时间】：2020-02-19 16:59:25

【问题描述】：

axios.get("/api/session/" + this.roomId)

上面是来自我的 axios 调用的 sn-p，它使用我的 api.php 路由（'/api/session/id 通过控制器加载请求的特定房间 => /api/session/3 是房间 3 )。

目前，这个 sn-p 是硬编码的，并且始终使用整数 1 表示“this.roomId”。 我这样做是为了检查我的 vue 是否工作正常。

我现在的问题是，我如何为道具 roomId 使用动态参数？

所以我总是可以说类似的话

.get/.post('url', $id) ?

【参考方案1】：

如果您将 roomId 作为 prop 传递给组件，那么您需要处理父组件中的更改。为此，我需要更多关于房间 ID 来自何处以及如何选择房间 ID 的上下文。

如果您关闭了这部分，那么您需要观察 roomId 属性的变化，并在数据发生变化时重新获取数据。你可以在你的房间组件中做这样的事情：

<script>
import axios from 'axios'

const props: 
  roomId: 
    type: Number,
    required: true
  


export default 
  props,
  data() 
    return 
      room: null
    
  ,
  methods: 
    async fetchRoom() 
     try 
       const response = await axios.get(`/api/session/$this.roomId`)
       this.room = response.data
      catch (err) 
       // - handle error
     
    
  ,
  watch: 
    roomId: 
      immediate: true // so it's executed when component is created
      handler: function () 
        this.fetchRoom()
      
    
  

</script>

【讨论】：

好的，你需要什么信息？目前我只使用我在 app.js 中注册的不同单个组件

您将需要一些包装器组件，它将 roomId 道具传递给您的房间组件，并有办法在那里更改 roomId。例如，使用某种下拉菜单。

你能给我一个链接或类似的东西，这样我就可以得到一个教程吗？我使用 Laravel 和 PHP 的时间不长

如果你在 Laravel 中，你可以遍历你的房间数组并将房间 ID 传递给 vue 组件：<room room-id=" $room->id "></room>laravel.com/docs/6.x/blade#loops