将数据保存在javascript类中

Question

我正在从api提取数据并将其保存在类中，但是当我尝试在函数中输出数据时，它给了我一个undefined的错误，当我在控制台中调用它时，我可以得到输出。

class Api{
    GetAllRates(){
        async function getData(){
            const Data = await fetch(`https://api.exchangeratesapi.io/latest?`);
            const JData = await Data.json();
            return JData
        }
        getData()
            .then(data=>{
                this.Jdata = data;
            })
            .catch(err=>console.log(err));
    }
    makeUi(){
        Ui.compareSection(this.Jdata); // TypeError: data is undefined //
    }
}

我也尝试id，但是我得到了{ }作为输出

class Api{
    constructor(){
        this.Jdata = {};
    }
    GetAllRates(){
        async function getData(base=`EUR`){
            const Data = await fetch(`https://api.exchangeratesapi.io/latest?`);
            const JData = await Data.json();
            return JData
        }
        getData()
            .then(data=>{
                this.Jdata = data;
            })
            .catch(err=>console.log(err));
    }
    makeUi(){
        Ui.compareSection(this.Jdata);
    }
}

Answer 1

我对您的代码做了少量重构。您必须在getData（）函数上返回一个promise才能在其上调用.then或.catch

class Api {
  constructor() {
    this.Jdata = {};
  }

  GetAllRates() {
    const getData = (base = `EUR`) =>
      new Promise(async (resolve, reject) => {
        try {
          const Data = await fetch(
            `https://api.exchangeratesapi.io/latest?base=${base}`
          );
          const JData = await Data.json();
          resolve(JData);
        } catch (error) {
          reject(error);
        }
      });

    getData()
      .then((data) => {
        this.Jdata = data;
      })
      .catch((err) => console.log(err));
  }

  makeUi() {
    Ui.compareSection(this.Jdata);
  }
}