Laravel构建的API通过JavaScript调用偶发返回空对象问题咨询

相关代码参考 #

前端代码 #

<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>

后端代码 #

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

可按以下步骤依次排查解决 #

• 修正请求路径：当前请求地址缺少http/https协议头，浏览器路径解析异常会导致请求异常，将请求地址修改为/api/hotels（相对路径适配不同部署环境）或者完整协议路径http://localhost/api/hotels。
• 禁用GET请求缓存：浏览器默认会缓存GET请求的返回结果，添加请求头禁用缓存即可解决缓存导致的返回异常，全局配置axios添加以下配置：

  axios.defaults.headers.common['Cache-Control'] = 'no-cache, no-store, must-revalidate'
  axios.defaults.headers.common['Pragma'] = 'no-cache'
  axios.defaults.headers.common['Expires'] = '0'
  

  也可以给请求添加时间戳参数避免命中缓存：

  const resp = await axios.get('/api/hotels', { params: { _t: Date.now() } });
  

• 修复Amadeus SDK初始化时序问题：仅页面加载完成后立即调用接口会出现问题、等待数秒后正常，核心原因是Laravel侧的Amadeus SDK需要先请求官方接口获取access token鉴权，鉴权完成前调用查询接口会返回空结果。可以在后端getHotels方法中添加日志打印$hotels的取值，确认是否为调用Amadeus接口时就已经拿到空值。确认问题后在后端做Amadeus access token的预缓存，避免每次请求都重新鉴权，也可以前端首次调用前加短延迟临时规避问题。
• 补充调试方案：如果以上方案都没有解决问题，在Chrome开发者工具的网络面板中对比正常请求和异常请求的请求头、响应头、返回值差异，就能快速定位到具体问题点。

内容的提问来源于stack exchange，提问作者Tarek