更简洁/优雅的方式来连接 fetch() 返回的 JSON 元素

【问题标题】：More Concise/Elegant Way to Concat JSON Elements Returned by fetch()更简洁/优雅的方式来连接 fetch() 返回的 JSON 元素
【发布时间】：2022-01-22 01:46:51
【问题描述】：

我目前正在使用 REST 从 WordPress 获取类别。 100 个限制迫使我进行多个查询。这是我目前的功能。这不漂亮。谁能想出更简洁的东西？

export async function getAllCategories() {
    let arr = []
    const res = await fetch(`${API_URL}wp/v2/categories?per_page=100&page=1`)
    const data = await res.json()
    const totalPages = res.headers.get("X-WP-TotalPages")
    data.forEach((el) => {
        arr.push(el)
    })
    let i = 2
    while (i <= totalPages) {
        const res = await fetch(`${API_URL}wp/v2/categories?per_page=100&page=${i}`)
        const data = await res.json()
        data.forEach((el) => {
            arr.push(el)
        })
        i++
    }
    return arr
}

【问题讨论】：

标签： javascript reactjs rest

【解决方案1】：

您可以定义一个辅助函数 getCategories，它检索特定页面的类别和页面总数。
这将删除 fetch 调用重复。
此外，您可以使用扩展运算符来避免 forEach 循环来填充结果数组：

export async function getAllCategories() {
    let result = []
    let page = 1;
    let totalPages = 0;
    do  {
        const { data, total } = await getCategories(page);
        result.push(...data)
        totalPages = total
        page++
    } while (page <= totalPages);
    return result
}

const getCategories = async (page) => {
    const res = await fetch(`${API_URL}wp/v2/categories?per_page=100&page=${page}`)
    return {
        data: await res.json(),
        total: res.headers.get("X-WP-TotalPages")
    }
}

【讨论】：