使用 axios 从 json 服务器获取数据

Question

我知道如何从json服务器获取所有数据，但现在我想知道是否有办法调用一定数量的say产品，因为我想添加一个按钮当用户点击它然后再次调用并在页面上显示更多产品时...我正在使用 Vue，这只是一个练习项目，我只是在创建视图，所以这就是我使用 json 服务器

<template>
<div v-for="product in products" :key="product.name">
    <Product :product="product" />
</div>
</template>

<script>
data() {
    return {
       products: []
    }
},
async created() {
    try{
        const response = await axios.get('http://localhost:3000/products')
            
        this.products = response.data
    } catch(err) {
        console.log(err)
    }
}
</script>

Answer 1

您可以在路线中使用 _limit 和 _page 查询参数。

// Get products 1-10
const response = await axios.get('http://localhost:3000/products?_limit=10&_page=1')

// Get products 11-20
const response = await axios.get('http://localhost:3000/products?_limit=10&_page=2')

// Get products 31-45
const response = await axios.get('http://localhost:3000/products?_limit=15&_page=3')