如何在 vuejs 中使用 axios 从数组中发布多个请求？

Question

我尝试使用 axios 从数组发布到 api php 文件并一一获取响应，而不仅仅是一个请求。我读过一些关于 axios.all() 的内容，但不知道我是 javascript 新手。

<div id="app">
    <center>
<div id="area">
   <textarea v-model="sent" name="sent" id="sent" cols="30" rows="10" class="form-control">
   </textarea>
    <br>
    <button v-on:click="insert" class="btn btn-default">Send</button>
</div>

<div id="good" v-for="message of messages">
    <span><h2>Good</h2></span>

        {{ message }}

</div>

</center>
</div>

这里是 vuejs 代码。

<script>
     new Vue({
 el:'#app',
 data:{
     sent:[],
     messages:[]
 },
         methods:{
           insert:function (){
               const vm = this;
               splitz.forEach(function(entry){
               axios.post('/one.php', {
                   sent: vm.entry
               }).then(response => {
                   vm.messages.push(response.data.onefinal) ;
                       console.log(response.data);
                   }
               ).catch(function(error){ console.log(error); });
               }
            }
         },
         computed:{
             splitz: function () {
                 return this.sent.split('\n')
             }
         }
    });
</script>

Answer 1

你可以这样做：

// Create an array of post requests from splitz array
var requests = splitz.map(entry => axios.post('/one.php', { sent: this.entry }))

// Send all requests using axios.all
axios.all(requests)
.then(results => results.map(response => response.data.onefinal))
.then(newMessages => {
    console.log('New Messages:', newMessages)
    this.messages.push.apply(this.messages, newMessages)
})

编辑：逐一发送请求：

insert: function() {

    var vm = this;

    function sendRequest(arr, i) {
        var entry = arr[i];
        axios.post('/one.php', { sent: entry }).then(function (response) {
            vm.messages.push(response.data.onefinal);
            if (i < arr.length - 1) {
                sendRequest(arr, ++i);
            }
        })
            .catch(function (error) {
                console.log(error);
            });
    }

    sendRequest(this.splitz, 0);

}