从 axios 获取 DRF 分页端点答案

【问题标题】：Get DRF paginated endpoint from axios从 axios 获取 DRF 分页端点
【发布时间】：2019-05-15 13:00:57
【问题描述】：

我的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))
}

【问题讨论】：

检查响应 json 是否下一个为空，如果它不为空，则点击下一个 url，否则停止
这就是我要编写的代码。

标签： django vue.js django-rest-framework axios vuex

【解决方案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))
},

【讨论】：