Использование Async и ожидание с Fetch (в действиях Redux) ReactJS - PullRequest
Новая
       16

Использование Async и ожидание с Fetch (в действиях Redux) ReactJS

0 голосов
/ 09 января 2019

Я пытаюсь вызвать несколько API один за другим, нажав кнопку. что-то вроде этого. а затем Пройдите по другому пути. 

 onRowClick = (id) => {
  this.props.selectQuestionnaire(id)
  this.props.getSpecificQuestionnaireAQ(id)
  this.props.getAQoptions(id)
  this.props.getAQResultarray(id)
  history.push('/answerques')
};

Все они определены как действия в слое приведения, я использую библиотеку извлечения для выполнения этих вызовов API. Примером одного такого действия является: 

export function getAQResultarray(aqid){
  return function(dispatch){
    console.log("fetching specific AQ")
    var myHeaders = new Headers();
    myHeaders.append('Accept' ,  'application/json');
    myHeaders.append('Content-Type' ,  'application/json');
    myHeaders.append('x-Auth-Token' ,  localStorage.getItem('authtoken'));

    const myInit = {
      headers: myHeaders,
      credentials : 'same-origin'
    };

    var url="http://10.00.000.00:000/abc/api/v1/"+aqid
    console.log(url);
    var myRequest = new Request(url)
    fetch(myRequest, myInit)
      .then((response) => {
        console.log("Response for aq responses  notfications : ",response)
        return response.json();
      })
      .then((tokenData) => {
        console.log("posting aq responses specific  : ",tokenData);
        dispatch({
        type : AQ_RESPONSEARRAY,
        payload : tokenData
      })})
      .catch((error) => {
        console.log(error);
      });
  }
};

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

Я слышал об обещании, а также об асинхронности / ожидании. Что легче реализовать?

1 Ответ

0 голосов
/ 09 января 2019

Если я правильно понимаю ваш вопрос, вы хотите добавить только последний фрагмент кода, т.е. перенаправление. В то время как действия идеально подходят для параллельной работы. Чтобы добиться этого, создатели ваших действий должны возвращать обещания, чтобы не разрывать цепочки обещаний. 

onRowClick = (id) => {
  // run all actions in parallel
  Promise.all([this.props.selectQuestionnaire(id)
    this.props.getSpecificQuestionnaireAQ(id)
    this.props.getAQoptions(id)
    this.props.getAQResultarray(id)])
  .then(() =>  history.push('/answerques'))
};

Исправлена ​​ошибка, при которой создатели действий возвращали обещания от громов. 

export function getAQResultarray(aqid){
  return function(dispatch){
    console.log("fetching specific AQ")
    var myHeaders = new Headers();
    myHeaders.append('Accept' ,  'application/json');
    myHeaders.append('Content-Type' ,  'application/json');
    myHeaders.append('x-Auth-Token' ,  localStorage.getItem('authtoken'));

    const myInit = {
      headers: myHeaders,
      credentials : 'same-origin'
    };

    var url="http://10.00.000.00:000/abc/api/v1/"+aqid
    console.log(url);
    var myRequest = new Request(url)

    // NB! return statement
    return fetch(myRequest, myInit)
      .then((response) => {
        console.log("Response for aq responses  notfications : ",response)
        return response.json();
      })
      .then((tokenData) => {
        console.log("posting aq responses specific  : ",tokenData);
        dispatch({
        type : AQ_RESPONSEARRAY,
        payload : tokenData
      })})
      .catch((error) => {
        console.log(error);
      });
  }
};

Если вы действительно хотите запускать действия одно за другим (но я сомневаюсь, что вам это действительно нужно), вы можете лучше придерживаться синтаксиса async/await хотя бы в обработчике. Но в любом случае, громовые слова вашего создателя действия должны наконец вернуть обещание. 

onRowClick = async (id) => {    
  await this.props.selectQuestionnaire(id)
  await this.props.getSpecificQuestionnaireAQ(id)
  await this.props.getAQoptions(id)
  await this.props.getAQResultarray(id)
  history.push('/answerques')
};
...