Question

我一直在不同的浏览器上测试我的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();

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

有没有办法避免使用'=＆gt;'在这个功能，使其适用于所有浏览器？

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

我尝试了一些解决方案，但现在我收到了这个错误：

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

Answer 1

只需使用普通函数语法而不是ES6 arrow-syntax：

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

Answer 2

使用普通函数而不是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/

Answer 3

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

＆＃13;

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();

＆＃13;

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

＆＃13;

浏览器支持Fetch API polyfill

Chrome
火狐
Safari 6.1 +
Internet Explorer 10 +

Answer 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();

Answer 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);

语法错误意外标记'＆gt;'

5 个答案: