如何等待 API 回调完全渲染组件？

Posted 2023-03-15

【中文标题】如何等待 API 回调完全渲染组件？

【英文标题】：How can i wait for API callback to completely render a component?

【发布时间】：2019-12-29 20:14:36

【问题描述】：

我从 API 获得请求，然后将数据分配给 created 方法中名为 source 的属性。现在在渲染函数中遇到一些问题，在组件完全创建之前将source 中的一些数据分配给它们的属性participants

source 属性在组件完全渲染后有其属性但participants 中没有数据

这是API Resource

return [
          'id' => $this->id,
          'user_id' => $this->user_id,
          'participants' => [
              'id' => $this->user_id,
              'name' => $this->user->name,
              'imageUrl' => 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
          ],
          'body' =>[
              'type' => 'text', 
              'author' => $this->user == auth()->user() ? "me" : $this->user->name,
              'data' => ['text' => $this->body],
          ],
          'created_at' => $this->created_at->diffForHumans(),
      ];

这是我的元素标签<beautiful-chat>

<beautiful-chat 
  :participants="participants" 
  :messageList="messageList"
  v-if=" this.source.length > 0 "
/>

这是渲染函数

<script>
export default 
  data() 
    return 
      source: ,
      room_id: ChatRoom.id(),
      participants:[],
      messageList: [],
    ;
  ,
  created()
      axios.get(`/api/room/$this.room_id/message`)
        .then(res => this.source = res.data.data);

    Array.prototype.forEach.call(this.source, child => 
        const parti = Object.keys(child.participants).map(i => child.participants[i])

        this.participants.push('id': parti[0], 'name' : parti[1], 'imageUrl' : parti[2]);

        const message = Object.keys(child.body).map(i => child.body[i])

        this.messageList.push('type': message[0], 'author' : message[1], 'data' :message[2] );

    );
  
;
</script>

我在哪里可以从源中获取数据以将它们放入我的属性中，而不是 created 方法

【问题讨论】：

res.data.data 是 array 还是 object ？

它是一个对象，我会更新API资源的问题

【参考方案1】：

首先制作source=null

export default 
  data() 
    return 
      source: null,
      room_id: ChatRoom.id(),
      participants:[],
      messageList: [],
    ;
  ,
  created()
    axios.get(`/api/room/$this.room_id/message`)
      .then(res => 
        let source = res.data.data
        // Array.prototype.forEach.call(source, child => 
        //   const parti = Object.keys(child.participants).map(i => child.participants[i])
        //   this.participants.push('id': parti[0], 'name' : parti[1], 'imageUrl' : parti[2]);
        //   const message = Object.keys(child.body).map(i => child.body[i])
        //   this.messageList.push('type': message[0], 'author' : message[1], 'data' :message[2] );
        // );

        // a better way:
        this.participants = [source.participants]
        this.messageList = [source.body]

        this.source = source
      );
  
;

在模板中：

<beautiful-chat 
  :participants="participants" 
  :messageList="messageList"
  v-if="source"
/>

您也可以使用computed property。