Vue Js - axios 的问题使用 laravel 执行多个并发请求

Posted 2023-02-22

【中文标题】Vue Js - axios 的问题使用 laravel 执行多个并发请求

【英文标题】：Vue Js - issue with axios Performing multiple concurrent requests with laravel

【发布时间】：2017-05-28 12:00:08

【问题描述】：

好吧，我可能有小问题，但我想不通。

如果我使用 axios 只传递一个 http 请求，一切都很好。

但是当我使用多个请求时，我会在控制台日志中得到结果，但无法发送到查看文件（laravel 刀片视图文件）。

让我给你看我的代码：

brand.blade.php

// main element for Vue js el: '#container'
<div id="container" class="row all_brands">
        <brands></brands>
    </div>


// template for brand component
<template id="brand-template">
   <ul>
     // if I only pass one http request through axios then  my data shows here but for multiple request not showing anything.
     <li v-for="brand in list" v-text="brand.brand_id"></li>

   </ul>
   @count
</template>

brand.js

Vue.component('brands',

template: '#brand-template',

data: function()

    return

        list: [],
        count: ''
    

,

created: function()

    //axios.get('api/brands').then(response => this.list = response.data) ; // here I send only one gttp request and working find..

    axios.all([
    axios.get('api/brands'),
    axios.get('api/brand_count')
    ])
        .then(
        axios.spread(
            function (brand, count) 
             // this is not working and not set these data to my brand.blade.php file template
             this.list = brand.data;
             this.count = count.data;
             // console show me all the data that coming from http request  
            //console.log('list',brand.data);
            //console.log('count',count.data);
            
    ))



);


new Vue(

el: '#container'

)

谁能告诉我如何在我的视图文件中显示数据？

【参考方案1】：

发生这种情况是因为this 的作用域在axios.spread 中不正确，之前它对你有用，因为你使用的是 es6 箭头函数，它会自动绑定this 作用域。

您可以进行以下更改以使其正常工作：

created: function()
    var that = this    
    axios.all([
    axios.get('api/brands'),
    axios.get('api/brand_count')
    ])
        .then(
        axios.spread(
            function (brand, count) 
             that.list = brand.data;
             that.count = count.data;
            
    ))