React项目使用fetchJsonp请求频繁超时失败该如何解决？

• 请求地址缺少协议头
  你当前使用的URL为相对路径格式kayak.com/h/mobileapis/directory/airlines/homework，浏览器会自动拼接当前项目的域名作为前缀，无法正确请求到目标站点接口，必须补全HTTPS协议头：

// 修正后的完整请求URL
'https://kayak.com/h/mobileapis/directory/airlines/homework'

• 手动调整超时阈值
  fetch-jsonp默认超时时间较短，极易触发超时报错，可通过timeout参数自定义超时时间（单位为毫秒）：

fetchJsonp('https://kayak.com/h/mobileapis/directory/airlines/homework', {
  jsonpCallback: 'jsonp',
  timeout: 10000, // 配置10秒超时，可根据实际需求调整
})
  .then(function (response) {
    return response.json();
  })
  .then(function (json) {
    console.log('parsed json', json);
  })
  .catch(function (ex) {
    console.log('请求失败', ex);
  });

• 确认回调参数匹配服务端要求
  fetch-jsonp的两个回调相关配置作用不同，不要混淆：

  • jsonp：指定服务端识别的回调参数名，默认值为callback，仅当服务端要求的参数名不符时需要修改
  • jsonpCallback：指定回调函数的自定义名称，大部分场景无需手动配置，保持自动生成即可
    如果修改URL和超时后仍然报错，可以先移除jsonpCallback配置，使用默认参数测试。

• 验证接口是否支持JSONP
  JSONP仅支持GET请求，且需要服务端做对应适配，如果接口本身不支持JSONP，无论如何调整参数都会失败。你可以直接在浏览器地址栏访问补全后的URL并追加?callback=test参数，查看返回结果是否为test(接口返回数据)的格式，确认接口支持JSONP调用。

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