Firefox 17版本Fetch API调用失效问题及适配解决方案咨询

嘿，这问题太典型了！Firefox 17是个相当老旧的版本，它完全不支持Fetch API——Fetch直到Firefox 39才正式被纳入原生支持，所以你的代码在它上面失效是必然的。下面给你两个靠谱的解决思路：

方案一：用XMLHttpRequest替代Fetch（无额外依赖，最稳妥） #

XMLHttpRequest是所有旧浏览器都支持的原生API，把你的Fetch代码改成XHR写法就能直接兼容Firefox 17。对应你给出的代码片段，等价的XHR实现如下：

// 创建XHR对象
var xhr = new XMLHttpRequest();
// 设置请求方法和URL
xhr.open('GET', 'https://xzy.example.api');
// 设置响应类型为JSON（部分旧浏览器可能不支持，也可以手动解析）
xhr.responseType = 'json';

// 请求成功完成时的处理
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 拿到解析后的JSON数据，和你原来fetch的response.json()结果一致
    var data = xhr.response || JSON.parse(xhr.responseText);
    // 这里写你原来.then里要执行的地图展示逻辑
    renderMapData(data);
  } else {
    // 处理HTTP错误
    console.error('请求失败，状态码：', xhr.status);
  }
};

// 请求出错时的处理
xhr.onerror = function() {
  console.error('网络请求出错');
};

// 发送请求
xhr.send();

如果你的API需要POST请求或者自定义请求头，只需要在open之后、send之前添加对应的设置即可，比如：

// 设置请求头（如果需要）
xhr.setRequestHeader('Content-Type', 'application/json');
// POST请求时发送的body数据
xhr.send(JSON.stringify(postData));

方案二：引入Fetch和Promise的Polyfill（保留原有代码写法） #

如果你不想改动太多现有代码，可以引入Polyfill来让Firefox 17支持Fetch。不过要注意：Firefox 17也不支持原生Promise，所以需要先引入Promise的Polyfill，再引入Fetch的Polyfill。

引入之后，你原来的Fetch代码就可以直接运行了：

fetch('https://xzy.example.api')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    // 地图展示逻辑
    renderMapData(data);
  })
  .catch(function(error) {
    console.error('请求出错：', error);
  });

不过要提醒你，这种方案会增加页面的加载体积，如果你是面向小众的老旧浏览器用户，或者希望最小化依赖，方案一其实是更优的选择。

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