Javascript 如何将此动态ajax函数转换为vue js

我有一个jquery函数用于

ajax

，用于多进程

<div id="status">
    <div id="waiting"></div>
    <div id="success"></div>
    <div id="warning"></div>
    <div id="reject"></div>
</div>   

<script>
    $( document ).ready(function() {    
        getNotifStatus("waiting","datatable_1");
        getNotifStatus("success","datatable_2");
        getNotifStatus("warning","datatable_3");
        getNotifStatus("reject","datatable_4");
    });
    function getNotifStatus(val,select){    
    $.ajax({
        type: "GET",
        url: '?val='+val+'&select='+select,
        success: function(data){
            $("#"+val).html("");
            $("#"+val).html(data);
        }
    });
    }
    </script>

$（文档）.ready（函数（）{
getNotifStatus（“等待”、“数据表_1”）；
getNotifStatus（“成功”，“数据表_2”）；
getNotifStatus（“警告”、“数据表_3”）；
getNotifStatus（“拒绝”、“数据表_4”）；
});
函数getNotifStatus（val，选择）{
$.ajax({
键入：“获取”，
url:'？val='+val+'&select='+select，
成功：功能（数据）{
$（“#”+val）.html（“”）；
$（“#”+val）.html（数据）；
}
});
}

在jquery中，我可以使用一个函数进行多个不同值的调用，但如何在vue中使用它，我尝试过使用vue，但我认为这只能用于相同代码中具有相同值的调用，如果我使用vue，我认为可以通过复制函数并用不同值复制代码来实现

这是我使用的vue代码

<script>
  var app = new Vue({
    el: '#status',
    data: {
      waiting: ''
    }
  })

  app.$http.get('https://example.org/?val=waiting&select=datatable_1')
    .then(function(response) {
      app.waiting= response;
    }, function(error) {
      console.log(error);
    });

</script>

var app=新的Vue({
el:“#状态”，
数据：{
正在等待：“”
}
})
应用程序$http.get（'https://example.org/?val=waiting&select=datatable_1')
.然后（功能（响应）{
app.waiting=响应；
}，函数（错误）{
console.log（错误）；
});

它是否可以将同一进程与动态jquery函数一起使用？

这不是一件好事吗

为什么要将所有请求保存在一个位置？这会降低应用程序的可伸缩性。您应该将它们分开，以便添加/删除功能

但是，如果您必须在一个地方加载它们，我建议（假设您已经将4个

拆分为组件）不要在组件中使用ajax调用（一次全部4个），而是在一些公共父级中使用，然后通过属性传递它们的响应

但请记住，这是一种反模式。如果您想制作一个好的、健壮的应用程序，您应该将每个请求保存在单独的组件中