Как использовать функцию asyn c и правильно экспортировать ее с помощью React Native? - PullRequest
Новая
       101

Как использовать функцию asyn c и правильно экспортировать ее с помощью React Native?

0 голосов
/ 30 января 2020

Мой вопрос касается правильной реализации функции asyn c для извлечения данных. У меня есть функция с именем _getData(), и я вызываю ее на componentDidMount() экрана. Но когда отклик сервера медленный, переключение на этот экран становится медленнее. Поэтому я хотел бы использовать функцию asyn c для извлечения данных. Но я не уверен, правильно ли я это делаю. Это правильный подход? Я не могу быть уверен, работает ли он асин c или нет.

Вот мой Api._getData() код: 

const _getData = async () => {
    return await axios.get("http://blabla.com/someservice", { params: someParamDataHere });
};

export const Api = {
    _getData
};

и на SomeScreen. js, у меня также есть Функция loadData (), которая вызывает вышеуказанную функцию и выполняет обновления состояния. 

loadData() {

    Api._getData()
    .then((response) => {
        this.setState({ myData: response.data });
    })
    .catch((error) => {
        console.log(error.response);
    });
}

в componentDidMount () функция того же экрана Я вызываю эту функцию loadData() напрямую.

Теперь достаточно ли объявить Api._getData () как asyn c и использовать в нем await, или мне тоже нужно изменить некоторые функции триггера?

Большое спасибо за вашу помощь .

Ответы [ 2 ]

0 голосов
/ 31 января 2020

вместо асин c ожидайте использования обещаний 

export const getRequest = (url) => {
  return new Promise((resolve, reject) => {
    api
      .get(url)
      .then((response) => {
        handleReponse(response)
          .then((errorFreeResponse) => {
            resolve(errorFreeResponse);
          })
          .catch((error) => {
            reject(error);
          });
      })
      .catch((error) => {
        reject(handleError(error));
      });
  });
};
0 голосов
/ 31 января 2020

Вы делаете правильно при получении в загрузке данных. Что вы можете сделать больше, так это попробовать больше синтаксического сахара es6, используя asyn c await в loadData, следовательно, 

    loadData = async() =>{
    try{
    let response = await Api._getData();
    this.setState({ myData: response.data });
    } catch(err){
    console.log(error.response);
    }
}

Надеюсь, это поможет. не стесняйтесь сомнений

...