передача данных с помощью функции async / await в действии

Question

У меня есть следующие две функции:

async function queryData(){
    const query= await axios.get('...')
    const queryStatus = portNames.map(...);
    const dataStatus= await Promise.all(queryStatus);
    return dataStatus;
}

export function actionData(){
const data = queryData();    
return{
        type:cst.RECEIVE_DATA,
        payload:data 
    }
}

Функция queryData () возвращает после некоторого кода строки некоторые данные в обещании ... во второй функции я помещаю данные в полезную нагрузку для отправки моего действия в редуктор. проблема в том, что когда я пытаюсь передать свои данные из первой функции в течение двух секунд, если я вывожу свою переменную в console.log () внутри второй функции, она показывает:

вместо этого, если я пытаюсь напечатать свою переменную внутри первой функции, я могу получить доступ к своему значению из обещания ... в чем может быть проблема, которая может создать обещание, ожидающее выполнения в actionData ()? .. Поэтому как я могу передать значение моих данных из обещания в действие таким образом, чтобы передать мои действия с относительными данными в редуктор?

Answer 1

Асинхронные функции всегда возвращают обещания. Если вы хотите получить доступ к значению, которое они содержат, вам нужно либо вызвать .then в обещании, либо поместить свой код в функцию async и await обещание.

Поскольку вы При использовании приставки есть некоторые дополнительные соображения. По умолчанию, redux делает все синхронно. Диспетчеризация действия должна синхронно go через редукторы и обновлять состояние. Чтобы сделать асин c с редуксом, вам нужно добавить промежуточное ПО. Существует несколько возможных промежуточных программных приложений asyn c, но рекомендованная командой редуксов программа-редукс-thunk.

с избыточным-thunk в вашем проекте вместо отправки объекта действия. Вы можете отправить функцию. Эта функция уполномочена выполнять асинхронные операции и отправлять действия после ее завершения. Таким образом, возможная реализация для вашего случая будет выглядеть примерно так:

function actionData() {
  return async function(dispatch) {
    const data = await queryData();
    dispatch({
      type: cst.RECEIVE_DATA,
      payload: data
    });
  }
}

Answer 2

Позвольте мне объяснить вам поток здесь.

Сначала мы пришли сюда const data = queryData();

В queryData функция у нас есть:

async function queryData(){
    const query= await axios.get('...')  <------------ first breakpoint ----------------
    // ......
}

Когда это asyn c req нажата, код не останавливает свой поток, он продолжается. Следующее возвращаемое выражение выполнено.

return {
  type:cst.RECEIVE_DATA,
  payload:data               // data is undefined at this moment
}

Тем временем ответ асин c возвращается. Мы последовательно выполняем следующие 3 оператора queryData() function

    const queryStatus = portNames.map(...);
    const dataStatus= await Promise.all(queryStatus);
    return dataStatus;

И теперь переменная data обновляется.

Чтобы обеспечить правильный поток, вы можете написать что-то вроде этого:

export async function actionData() {
  const data = await queryData();    
  return {
    type:cst.RECEIVE_DATA,
    payload:data 
  }
}

Я бы рекомендовал вам прочитать о async / await на MDN .