使用 Laravel 构建 API 仅在通过 javascript 调用时返回空对象......有时

Question

我正在使用 VueJS 和 Laravel 构建一个网页，在遇到这个问题之前一切正常。

首先，让我分享一下必要的代码：

<script>
    axios.defaults.headers.common['Content-Type'] = 'application/json'

    var app = new Vue({
        el: '#app',
        methods: {
            getHotelsByCityName: async function () {

                const resp = await axios.get('localhost/api/hotels');
                console.log(resp);
                
            }
        },
    })
</script>

发送请求的 Javascript 代码就这么简单，后端我只是将数据编码为 JSON 格式，然后发送回客户端。

   public function getHotels(Amadeus $amadeus,$destination)
    {
        $hotels =   $amadeus->searchForHotelsByCityOrAirportName($destination);
        return response()->json($hotels);
    }

请注意，我有时会得到数据，有时会得到空对象，事实上，如果我打开网页并继续刷新它，有时我会得到数据，有时我不会，我发现清除浏览器缓存增加了我获得正确数据的机会，因此这可能是一个缓存问题，但究竟缓存了什么？这是怎么回事？

我正在使用 Amadeus API，您知道，当我直接在浏览器中访问 API 链接时，它始终有效。所以后端看起来不错，不知道问题出在哪里。

编辑 1： 我注意到，当我使用 google chrome 开发工具检查请求时，我得到了一个空对象（有时又一次），但是当我用浏览器直接点击 API 时，我又得到了一个空对象工作正常，我在控制台中没有收到任何错误，但我猜这可能是 headers 或 cookies 问题。如果有人可以提供帮助，我将不胜感激。

编辑 2： 我发现如果我等待几秒钟然后执行该方法一切正常，只有当我从 mount() function 调用 getHotelsByCityName 时才会出现问题或任何其他在页面加载后立即执行的方法。

Answer 1

按 F12 或 ctrl+shift+I 在浏览器上打开开发人员工具。并切换到network面板查看浏览器发送的请求和服务器发送的结果。

我认为getHotelsByCityName()应该写在Vue中的created或mounted部分，以便在页面加载时获取数据。

Answer 2

将 then 用于异步等待

<script>
    axios.defaults.headers.common['Content-Type'] = 'application/json'

    var app = new Vue({
        el: '#app',
        methods: {
            getHotelsByCityName: async function () {

               await axios.get('localhost/api/hotels').then(resp => {
                  console.log(resp)
               })
                
            }
        },
    })
</script>