Question

我的django-rest-framework API中有一个分页的端点。对列表GET请求的响应如下：

{
"count": 161,
"next": "http://localhost:8000/api/v2/bars/?limit=50&offset=50",
"previous": null,
"results": [
    {
        "id": 1,
        "name": "Bar1",
        "url": "http://localhost:8000/api/v2/bars/1/",
        "budget": 800000,
    },
    // more items...
]
}

如果我想从axios提取所有页面直到结尾然后将其转储到我的vuex状态，什么是最好的方法？

我当前的代码仅显示第一页。 axios会话请求：

bars() { return session.get('/bars/') }

vuex操作：

barsRefresh(context) {
    api.bars().then((data) => context.commit('setBars', data.results))
}

Answer 1

基于this的答案，我创建了一个工厂，该工厂使用url并返回工作函数：

// returns a promise once it gets ALL pages from API
function paginated_factory(url) {
    return function paginatedFetcher(next, obj_list = []) {
        return session.get(next ? next : url)
            .then(({data}) => {
                obj_list.push(...data.results)
                if (!data.next) return obj_list
                return paginatedFetcher(data.next, obj_list)
            })
    }
}

然后，我的API模块功能：

bars: paginated_factory('/bars/')

我的vuex动作：

barsRefresh(context) {
    api.bars().then((data) => context.commit('setBars', data))
},

从axios获取DRF分页的端点

1 个答案: