在 class 函数中获取 API

Question

我在解构从我的 Aztro class 中提取 api 的对象 return 时遇到问题 class。

我尝试了各种方法来随机解构它，但都没有成功....

如果我 return 它而不是控制台日志记录，我该如何访问它？请参阅代码和评论以进一步澄清我的问题。

我想这样做的原因是 api 一次只会 return 一个星座。

 class Aztro {
  constructor(sign){
    this.sign = sign
  }
  getData(){
    return fetch('https://example/?sign=' + this.sign + '&day=today', {
      method: 'POST'
    })
    .then( response => response.json() )
    .then( data =>  {
      console.log(data) // how do I destructure this if it's returned and not just console.log()
    })
  }
}

let aries = new Aztro('aries')      // Can pass in zodiac signs to fetch data
let aquarius= new Aztro('aquarius')

aries.getData()     // this logs the json data in the console....

// EDIT this is how I tried to destructure it 

const {description} = aries
const {description} = aries.getData() // this returns Object promise when i tried to output it to the dom 
const {description} = Aztro

Answer 1

您可以通过两种方式访问获取的数据：

1- 使用承诺链，像这样：

aries.getData().then(data => console.log(data))

2- 使用 async/await 获取 data.The 使用 async/await 的重点是你必须在异步函数中调用 await 关键字（我定义 [=14 的原因=] 下面代码中的函数）像这样：

class Aztro {
  constructor(sign){
    this.sign = sign
  }
  async getData(){
    const response = await fetch('https://example/?sign=' + this.sign + '&day=today', {
      method: 'POST'
    })
    const data = await response.json();
    return data;
  }
}

async function app(){
  let aries = new Aztro('aries')      // Can pass in zodiac signs to fetch data
  let aquarius= new Aztro('aquarius')
  const data = await aries.getData();
  console.log(data);
}
app();

在 class 函数中获取 API

Fetch API inside a class function

javascript

class

destructuring

fetch