не получается вернуть данные из массива [дубликат]

113

09 декабря 2020, 10:50

На этот вопрос уже даны ответы здесь:

Как вернуть значение из события или из функции обратного вызова? Или хотя бы дождаться их окончания (3 ответа)

Закрыт 1 год назад.

есть код

const fetchData = {
  data: [],
  ft(){
    fetch('http://127.0.0.1:8000/api/v1/')
    .then(response => response.json())
    .then(data => this.data.push(data))
    .finally(() => {
      document.getElementById("myButton").style.backgroundColor = 'red';
      // return this.data
      // console.log(this.data)
    })
    .catch(error => console.log(error))
    console.log(this.data)
  },
  mapFt(){
    console.log(this.ft())  //.map(i => console.log(i))
  }
}
export default fetchData.ft()

который возвращает вот это

как мне забрать от туда data?

Answer 1

Тут промисы юзать нужно, потому что сначала fetch(...) вызывается асинхронно, он не успевает записать данные.

Попробуй что-нибудь такое:

async ft() {
    new Promise((res, rej) => {
        fetch('http://127.0.0.1:8000/api/v1/')
            .then(response => response.json())
            .then(data => this.data.push(data))
            .finally(() => {
                document.getElementById("myButton").style.backgroundColor = 'red';
                res()
                // return this.data
                // console.log(this.data)
            })
        .catch(error => console.log(error))
    }).then(() => console.log(this.data))
},

Answer 2

short version

  async ft(){
    const response = await fetch('http://127.0.0.1:8000/api/v1/')
    const data = await response.json()
    .finally(()=>{
      document.getElementById("myButton").style.backgroundColor = 'green';
    })
    console.log(data.data)
    return data
  }

то что предложил Рустам