Question

我已经编写了代码来从Chuck Norris的API中获取类别。问题是每当我拿到我要求数据时。当我在我的fetch函数中使用console.log(data)时，它给了我数据。但是当我在其他函数中调用fetch函数时，它不起作用。

我的getCategory（）给出了 undefined ，而我的generateRandomQuotes（e）给出了

位于0的JSON中的意外标记u

如果有人能帮助我解决我的问题，我将不胜感激。

抱歉我的英语不好。

document.addEventListener('DOMContentLoaded', init);

function init(){
document.querySelector('#generateQuote').addEventListener("click", generateRandomQuote);
getCategory();
}

function doFetch(url){
    fetch(url, {
        cache: 'no-cache',
        headers: new Headers({
            'Accept': 'application/json'
        })
    }).then(function (response) {
        if (response.ok) {
            return response.json();
        }
        else {
            throw new Error('No response');
        }

    }).then(function (data) {
        return data;

    })
        .catch(function(error){
            console.log(error);
        });
}

function generateRandomQuote(e){
    e.preventDefault();
    let url="https://api.chucknorris.io/jokes/random";
    let fetchQuote = doFetch(url);
    let quote = JSON.parse(fetchQuote);
    console.log(quote);
}

function getCategory(){
    let url="https://api.chucknorris.io/jokes/categories";
    let fetchCategories = doFetch(url);
    console.log(fetchCategories);

}

Answer 1

试试这段代码： -

这是使用async / await，这是现代JS的新功能。

＆＃13;

    function init(){
          document.
          querySelector('#generateQuote').
          addEventListener("click", generateRandomQuote);
          getCategory();
     }
 

    function doFetch(url){
      return  fetch(url, {
          cache: 'no-cache',
          headers: new Headers({
          'Accept': 'application/json'
      })
      }).then(function (response) {
          if (response.ok) {
              return response.json();
      }
          else {
              throw new Error('No response');
          }

      }).then(function (data) {
          return data;

      })
          .catch(function(error){
              console.log(error);
          });
      }

   async function generateRandomQuote(e){
      e.preventDefault();
      let url="https://api.chucknorris.io/jokes/random";
      let fetchQuote = await doFetch(url);
      console.log(fetchQuote);
    }

    async function getCategory(){
      let url="https://api.chucknorris.io/jokes/categories";
      let fetchCategories = await doFetch(url);
      console.log("inside getCatagoty", fetchCategories);
    }

    init()

＆＃13;

<input type= "button" value ="demo" 
id = "generateQuote"
></input>

＆＃13;

Answer 2

你需要回复承诺：

更改

fetch(url, {

到

return fetch(url, {

等待它：

doFetch(url).then(function(quote){
    console.log(quote);
});

Answer 3

我建议在doFetch()函数中添加一个回调参数，如下所示：

function doFetch(url, callback){
    fetch(url, {
        cache: 'no-cache',
        headers: new Headers({
            'Accept': 'application/json'
        })
    }).then(function (response) {
        if (response.ok) {
            return response.json();
        }
        else {
            throw new Error('No response');
        }

    }).then(function (data) {
        callback(data); // call the passed function with the returned data

    })
        .catch(function(error){
            console.log(error);
        });
};

之后，您可以在代码中使用该功能：

function generateRandomQuote(e){
    e.preventDefault();
    let url="https://api.chucknorris.io/jokes/random";
    doFetch(url, (data) => {
        let quote = data.value;
        console.log(quote);
    });   
}

如何调用异步函数并在另一个函数内获取响应？

3 个答案: