如何在 Vue.js 中使用多个 API

Question

我想在 Vue.js 中调用多个 API，如下所示：

<script>
    const app = new Vue({
        el: '#app',
        data: {
            array1: [],
            array2: []
        },
        created(){
            fetch('http://localhost/api/first')
            .then(Response => Response.json())
            .then(json => {
                this.array1 = json
            }),

            fetch('http://localhost/api/second')
            .then(Response => Response.json())
            .then(json => {
                this.array2 = json
            })
        }
    })
</script>

当我在 Chrome 中使用 Vue devtools 时，我可以看到识别了 2 个数组，当我使用 Fiddler 时，我可以看到两个 API 都被调用了。问题是第二组 JSON 结果，即来自 http://localhost/api/second 的结果不填充 array2.

有什么想法吗？

Answer 1

只是回答我自己的问题，以防其他人遇到类似问题。首先，上面问题中的代码工作正常。我的问题是 CORS 没有在服务器端为 http://localhost/api/second API 启用，但它需要启用。 Fiddler 不受 CORS 限制的影响，因此可以很好地获取 API 结果。

如何在 Vue.js 中使用多个 API

How to use multiple API's in Vue.js

vue.js

cors

fiddler