Внешние данные получены, но ответ не получен при возврате - PullRequest
Новая
       3

Внешние данные получены, но ответ не получен при возврате

1 голос
/ 11 апреля 2020

Я получаю внешние данные следующим способом в отдельном файле. Я могу получить эти данные в порядке на основе журнала консоли. 

import axios from "axios";

const FetchData = async query => {
  axios.get(`https://www.googleapis.com/youtube/v3/search`, {
    params: {
      part: 'snippet',
      maxResults: 10,
      q: query,
      key: 'some_key'
    }
  })
    .then(response => {
      // works this log prints correct data
      console.log(response.data.items)
      return response.data.items
    }).catch(e => {
      console.log(e)
  })
}

export default FetchData;

Я вызываю этот FetchData из моего файла приложения. js следующим образом в методе handleSubmit (указанный выше консольный журнал по-прежнему печатается правильно, когда я выполняю этот вызов из приложения. js, таким образом, все еще получая внешние данные в порядке). Но когда я пытаюсь напечатать ответ в методе handleSubmit, как показано ниже, он печатается как неопределенный. Сначала я получаю неопределенную печать (из приложения. js), а затем печать значений внутри response.data.items (из FetchData). Могу ли я узнать, что я делаю не так, пожалуйста? Спасибо. 

class App extends Component {

  handleSubmit = async query => {
    // also undefined
    // const response = await FetchData(query);
    // console.log(response)

    await FetchData(query).then(res1 => {
      //undefined printed from here. 
      console.log(res1)
    })
  }

  render() {
    return (
     // some logic
  }
}

export default App;

1 Ответ

1 голос
/ 11 апреля 2020

Попробуйте; 

import axios from "axios";

const FetchData = query => {
  return axios.get(`https://www.googleapis.com/youtube/v3/search`, {
    params: {
      part: 'snippet',
      maxResults: 10,
      q: query,
      key: 'some_key'
    }
  })
}

export default FetchData;

class App extends Component {

  handleSubmit = query => {

    FetchData(query).then(res1 => {
      console.log(res1)
    })
  }

  render() {
    return (
     // some logic
  }
}

export default App;

Вам необходимо вернуть топор ios Обещание, чтобы использовать then. Вы не можете использовать затем в функции, а затем вернуть его и использовать его снова.

...