Получить полный ответ с помощью fetch () - PullRequest
Новая
       33

Получить полный ответ с помощью fetch ()

0 голосов
/ 03 октября 2018

Я пытаюсь получить результат json моего API, используя fetch() для получения данных, и я использую async / await, чтобы дождаться разрешения промисса, но когда моя функция fetchArticlesList() возвращается в return responseJson, яполучить обещание, как это: Promise {_40: 0, _65: 0, _55: null, _72: null} вместо JSON.Как я могу получить json для моего <Flatlist> компонента? 

<FlatList
    data={(()=> {
            if (this.props.data)
                return this.props.data

            const response = APIRequest.fetchArticlesList()

            return response
        })()
    } 
    renderItem={(article) => (
        ...
    )}
/>

APIRequest: 

async fetchArticlesList() {
    try {
        const response     = await fetch(`${apiBackoffice}/articles`)
        const responseJson = await response.json();

        return responseJson; //this returns the promisse, instead of the json. I want to get the json
    } catch (error) {
        console.error(error)
    }
}

1 Ответ

0 голосов
/ 03 октября 2018

APIRequest.fetchArticlesList() - это функция async, поэтому она возвращает объект Promise (посмотрите документ здесь ).Загрузите ответ API в state и, когда он загружен, передайте его в FlatList.Рассмотрим следующий пример 

class SomeComp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: [], isLoading: true }
  }
  componentDidMount() {
    APIRequest.fetchArticlesList().then(data => {
      this.setState({
        data,
        isLoading: false
      });
    });
  }

  render() {
    const { isLoading, data } = this.state;
    if (isLoading) {
      return <ActivityIndicator .../>
    }
    return (
      <FlatList
       data={data}
       ...
      />
    );
  }
}

Надеюсь, это поможет!

...