时间戳

首页 > 解决方案 > 使用 Laravel 构建 API 仅在通过 javascript 调用时返回空对象......有时

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

问题描述

我正在使用 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：我注意到当我使用谷歌浏览器开发工具检查请求时，我得到一个空对象（有时再次），但是当我直接用浏览器点击API时，一切正常，我没有收到任何错误控制台，但我猜它可能是 headers 或 cookies 问题。如果有人可以提供帮助，我将不胜感激。

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

标签： javascriptlaravelvue.jscachingaxios

解决方案

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

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

推荐阅读