[Vuejs]-Push axios requests to axios.all array

by

0👍

✅

axios.all([]) will return a promise. So using .push on a promise will give you the error:

TypeError: this.testar.push is not a function

Instead just create an array without the axios function. 

data: {
    ...
    testar: []
},

Inside the checkin function change the map logic to the following rules. This will create a new array with promises and assigns the new array to the this.testar property. Then with Promise.all you can wait for all the promises to resolve in parallel.

var lista = e.split('\n');
this.testar = lista.map((value) =>

    axios.get('http://localhost/fg/nova.php', {
        crossDomain: true,
        params: {
            lista: value
        }
    });

);

Promise.all(this.testar).then(responseArr => {
    //code...
});

If you don’t want to wait for all the Promises to end before continuing you could remove the Promise.all function and add your then methods to the axios.get function. 

var lista = e.split('\n');
this.testar = lista.map((value) =>

    axios.get('http://localhost/fg/nova.php', {
        crossDomain: true,
        params: {
            lista: value
        }
    }).then(response => {
       // code...
    });

);

0👍

try this 

new Vue({
el: '#central',
data: {
    estilo: 'resize:none;text-align:center;color:red;width:450px;height:200px;font-size:15px;',
    capkey: 'text-align:center;color:RED;font-size:17px;;width:20%;height:40%;',
    ativar: true,
    buttonvalue: 'Inserir lista',
    livestyle: 'color:#519872;font-size:17px;',
    diestyle: 'color:#fd2eb3;font-size:17px',
    lives: [],
    dies: [],
    testar: []
},
methods: {

    checkin(e) {
        console.log(this)
        this.buttonvalue = 'Testar'
        this.ativar = false
        var lista = e.split('\n');

        lista.map((value, key) => {

            this.testar.push(axios.get('http://localhost/fg/nova.php', {
                crossDomain: true,
                params: {
                    lista: value
                }
            }));


        });

        axios.all(this.testar).then(axios.spread(...responseArr) => {
            //code... var x= responseArr[0]
        });


    },
}

})

Leave a comment