将 axios 请求推送到 axios.all 数组

Question

晚安。

我正在尝试向axios.all([])数组添加一个数组！

我的代码：

app2.js

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: axios.all([])
    },
    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
                    }
                }));


            });

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


        },
    }
})

如何使用数组推送将请求（对象）添加到axios.all ([])然后并行处理它们？

vue.js:1897 TypeError: this.testar.push is not a function
    at app2.js:24

谢谢！

Answer 1

尝试这个

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]
        });


    },
}

})

Answer 2

axios.all([])将返回一个承诺。 因此，在承诺上使用.push会给您带来错误：

类型错误：this.testar.push 不是函数

而只是创建一个没有 axios 函数的数组。

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

在checkin函数中，将map逻辑更改为以下规则。 这将创建一个带有 promise 的新数组，并将新数组分配给this.testar属性。 然后使用Promise.all您可以等待所有承诺并行解决。

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...
});

如果您不想在继续之前等待所有Promise.all结束，您可以删除Promise.all函数并将then方法添加到axios.get函数。

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...
    });

);