Question

我试图将json保存到变量中，但似乎我并不了解这里的所有内容。我让json在我喜欢的方式中出现在控制台中，但在我尝试再次调用之后它只返回promise。如何将json保存到变量中以便以后可以在json中使用对象？

var jsondata = fetch(url).then(
    function(u){ return u.json();}
  ).then(
    function(json){
      console.log(json);
    }
  )
console.log(jsondata);

Answer 1

let jsondata;    
fetch(url).then(
        function(u){ return u.json();}
      ).then(
        function(json){
          jsondata = json;
        }
      )

基本上，一旦promise与实际数据一起解析，您需要分配jsondata变量。目前，您要将整个承诺分配给jsondata变量，而这不是您想要的。

Answer 2

fetch API是基于Promise的，并且将始终返回已解决或拒绝的新Promise。您有多个选项来存储结果。

变量赋值

let data = [];

fetch(url)
    .then(response => response.json())
    .then(result => data.push(result));

不幸的是，由于您不知道何时填充了数据变量，因此可能会出于某种原因而产生hacky。

无极

function getData(url) {
    return fetch(url)
        .then(response => response.json())
        .then(result => result);
}

getData(URL)
    .then(result => console.log(result));

Anync＆amp;等待

async function getData(url) {
    const response = await fetch(url);

    return response.json()
}

async function main() {
    const data = await getData(URL);

    console.log(data)
}

如果你问我，我会选择async＆amp;等待。

Answer 3

另一种选择是使用回调作为参数，这样就不会将变量暴露给全局范围。

function getFromAPI(url, callback){
  var obj;
  fetch(url)
    .then(res => res.json())
    .then(data => obj = data)
    .then(() => callback(obj))
 }

getFromAPI('https://jsonplaceholder.typicode.com/posts', getData);

function getData(arrOfObjs){
  var results = "";
  arrOfObjs.forEach( (x) => {
    results += "<p> Id: " + x.id + "<ul>"
    Object.keys(x).forEach( (p) => {
        results += "<li>" + (p + ": " + x[p]) + "</li>";
    });
    results += "</ul> </p> <hr>"
  })
  results += "";
  document.getElementById("myDiv").innerHTML = results;
}

http://jsfiddle.net/5gch2yzw/

Answer 4

您可以在fetch函数之外创建一个单独的函数来处理json数据，如下面的代码所示，fetch函数将完整的json对象传递给另一个名为“ data_function”的函数，我们可以通过以下方式继续使用JSON对象： data_function”。

//fetch function
fetch(url).then(
function(u){ return u.json();}
).then(
function(json){
data_function(json); //calling and passing json to another function data_function
}
)

//another functions
function data_function(data){
alert(data.length); 
}

Answer 5

最简单的方法是使用 async/await 方法。

只需将以下代码复制并粘贴到您的 chrome 开发控制台中即可查看效果：

async function githubUsers() {
            let response = await fetch('https://api.github.com/users')
            let users = await response.json()
            console.log(users)
    }

githubUsers()

将Fsonched Json保存到变量中

5 个答案: