语法错误意外令牌'>'答案

【问题标题】：Syntax error unexpected token '>'语法错误意外令牌'>'
【发布时间】：2018-05-07 13:47:55
【问题描述】：

我一直在不同的浏览器上测试我的 JS 代码，但它似乎不适用于其中一些浏览器和移动设备。

JS

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(json => {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
      document.getElementById("newsContent2").innerHTML = body;
    });
}
req1();

通过阅读这个问题，我了解到问题可能与 '=>' 有关，因为它是 ES6 元素，并非所有浏览器都支持它。但正如您在这里看到的，这似乎是获取这些 json 数据的方法：https://jsonplaceholder.typicode.com/

有没有办法避免在这个函数中使用 '=>' 让它在所有浏览器上都能工作？

例如，我在 Safari 9 上遇到的错误：

我尝试了一些解决方案，但现在出现此错误：

帖子还没有打印出来，有什么想法吗？

【问题讨论】：

是的，使用普通的function 语法。也就是说，如果有任何浏览器支持 fetch() 但不支持 ES6 箭头函数。 IDK
你不能在没有转译器的情况下使用“lambda”。以 Babel 为例
如果它不支持箭头函数，为什么错误实际上表明它来自匿名函数？您确定错误与此有关吗？
Safari 9 也不支持 Fetch API，所以修复箭头函数只是一个开始。另一方面，Safari 9 已经使用了三年，市场份额为 0.03%，所以我个人并不担心。
您使用的是哪个浏览器？

标签： javascript ecmascript-6 safari9

【解决方案1】：

只需使用普通函数语法而不是 ES6 箭头语法：

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
      document.getElementById("newsContent2").innerHTML = body;
    });
}
req1();

大多数不支持 ES6 箭头语法的浏览器不太可能支持 Fetch API。对于那些我建议使用另一种形式的 HTTP 请求，或者使用 Polyfill，例如 GitHub's

【讨论】：

知道为什么帖子还没有打印，我现在得到这个错误：ReferenceError: Can't find variable: fetch.我正在用截图编辑我的问题
正如我在评论中所写，并非所有浏览器都支持 fetch API。在这种情况下，您需要使用其他形式的 HTTP 请求

【解决方案2】：

你需要使用 fetch polyfill 和旧函数语法，而不是 es6 的新箭头函数语法。

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(function (res) {return res.json()})
    .then(function (json) {
      var title = json.title;
      var body = json.body; 
      document.getElementById("newsTitle").innerHTML = title;
      document.getElementById("newsContent").innerHTML = body;
    });
}
req1();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.4/fetch.js"></script>
<div id="newsTitle"></div>
<div id="newsContent"> </div>

浏览器对 Fetch API polyfill 的支持

铬
火狐
Safari 6.1+
Internet Explorer 10+

【讨论】：

【解决方案3】：

使用普通函数而不是 lambda：

"use strict";

function req1() {
    fetch('https://jsonplaceholder.typicode.com/posts/1').then(function(response){
        return response.json();
    }).then(function(json){
        var title = json.title;
        var body = json.body;
        document.getElementById("newsTitle").innerHTML = title;
        document.getElementById("newsContent").innerHTML = body;
        document.getElementById("newsContent2").innerHTML = body;
    });
}
req1();

随便写

.then(function(json){

代替

.then(response => response.json())

另外，如果您不确定脚本中的 ES6 语法，您可以使用类似 babel:

https://babeljs.io/repl/

【讨论】：

【解决方案4】：

更改以下行

then(response => response.json())

到

.then(function(response){ response.json() })

和

.then(json => {

到

.then(function (json) {

完整代码：

function req1() {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
   .then(function(response){ response.json()})
   .then(function (json){
     var title = json.title;
     var body = json.body; 
     document.getElementById("newsTitle").innerHTML = title;
     document.getElementById("newsContent").innerHTML = body;
     document.getElementById("newsContent2").innerHTML = body;
   });
}
req1();

【讨论】：

【解决方案5】：

为什么不使用简单的请求

 var xhReq = new XMLHttpRequest();
 xhReq.open("GET", "https://jsonplaceholder.typicode.com/posts/1", false);
 xhReq.send(null);
 var serverResponse = xhReq.responseText;
 var json = JSON.parse(serverResponse);
 alert(json.title);

【讨论】：