从Vuejs上的多个axios请求构建一个嵌套数组

时间:2020-05-10 10:13:12

标签: vue.js request axios

我是Vuejs的新手,我不知道如何从2个axios请求构建嵌套数组,我知道有一种更好的方法可以实现目标...通过此代码,我可以构建2个独立的数组,一个用于productList(具有单个商店的所有产品),另一个用于shopName(具有所有shop_urls)。我需要对嵌套请求使用array.map,因为我想为每个shop_url构建产品数组

import axios from 'axios';

    export default 
    {
        name: 'Product',

        data: () => ({
            key: 'mySecretKey',
            productsList: [],
            shopName: [],
            errors: [],
        }),

          mounted() {
            axios.get('https://shop.domain.org/api/shop_urls?display=full&output_format=JSON', {                
                auth: {
                    username: this.key
                },
        }) 
        .then(response => response.data.shop_urls.map((val) => {
            this.shopName.push(val.virtual_uri)
            axios.get('https://shop.domain.org/' + val.virtual_uri + '/api/products?display=full&output_format=JSON', {                
                auth: {
                    username: this.key
                },
            })
            .then(response => this.productsList.push(response.data.products))
            .catch(e => this.errors.push(e))

        }))
    }
}

响应: enter image description here

1 个答案:

答案 0 :(得分:1)

在我看来您可以使用

this.$set(this.productsList, val.virtual_uri, response.data.products)

那会创造

productsList: [
    "whateverthevirtualuriwas": [
        ...response.data.products
    ]
]

无需多说就知道数据如何到达以及如何使用它,这很有意思,但是希望这会有所帮助。

回答问题 好的,无需将shopName和productsList放入数据imo中。只是合并的数组。

// in your data: mergedArray: [ ]

for (let index in shopName) {
    const uri = shopName[index]
    const products = productList[index]

    this.$set(this.mergedArray, uri, products)
}