blogRoutes : Nuxt: Nuxt不可迭代

Question

我正在测试Nuxt，特别是如何为静态站点模式生成路由。当我部署到Netlify时，我在部署日志中得到错误TypeError: blogRoutes is not iterable。这意味着什么，因为这两个请求的输出似乎都是简单字符串数组。任何帮助都将不胜感激。

下面是一个稍微做作的例子，因为我对Contentful进行了两次调用，实际上这将是Shopify和Contentful。

generate: {
    routes: () => {
        const client = contentful.createClient(config)

        const blogRoutes = client
            .getEntries({
                content_type: 'blogPost'
            })
            .then(response => {
                return response.items.map(
                    entry => `/blog/${entry.fields.slug}`
                )
            })
        const collectionRoutes = client
            .getEntries({
                content_type: 'collection'
            })
            .then(response => {
                return response.items.map(
                    entry => `/collections/${entry.fields.slug}`
                )
            })
        const routes = [[...blogRoutes, ...collectionRoutes]]

        return routes
    }
}

Answer 1

blogRoutes和collectionRoutes都是promises，而不是数组。它们解析成数组(我假设)，但您需要等待它们，或者使用Promise.all()。

还要注意，您似乎没有返回正确的data，您希望返回一个字符串数组，而不是一个字符串数组的and数组。

generate: {
    routes: async () => { // add async here
        const client = contentful.createClient(config)

        const blogRoutes = await client // add await here
            .getEntries({
                content_type: 'blogPost'
            })
            .then(response => {
                return response.items.map(
                    entry => `/blog/${entry.fields.slug}`
                )
            })
        const collectionRoutes = await client // add await here
            .getEntries({
                content_type: 'collection'
            })
            .then(response => {
                return response.items.map(
                    entry => `/collections/${entry.fields.slug}`
                )
            })

        const routes = [...blogRoutes, ...collectionRoutes] // return a single array of strings

        return routes
    }
}