javascript - 如何调用异步函数并在另一个函数中获取其响应？

Question

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

我的 getCategory() 给出未定义，而我的generateRandomQuotes(e)给出

JSON 中位置 0 处出现意外标记 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

试试这个代码:-

This is using async / await, that's new with modern JS.

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

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