使用异步/等待功能传递数据

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（）函数在某些行代码之后返回promise中的某些数据...在第二个函数中，我将数据放入有效负载中以将动作发送给reducer。 问题是当我试图在两秒钟内从第一个函数传递数据时，如果我在第二个函数内的console.log（）中输出变量，则显示：

相反，如果我尝试在第一个函数中打印变量 我能够从promise访问我的值...可能是什么可能在actionData（）中创建promise的问题？。那么我如何将我的数据值从promise传递到action，以一种方式分配我的action减速器的相关数据？

Answer 1

异步函数总是返回promise。如果要访问它们包含的值，则需要在Promise上调用.then，或将代码放入async函数和await Promise中。

由于您使用的是redux，因此还有一些其他注意事项。默认情况下，redux同步执行所有操作。调度动作应同步通过化简器并更新状态。要使用redux进行异步处理，您需要添加一个中间件。有几种可能的异步中间件，但是一个recommended by the redux team是redux-thunk。

在项目中使用redux-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 ----------------
    // ......
}

当这个异步请求被点击时，代码不会停止它的流，而是继续。下一条返回语句被命中。

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

同时，异步请求的响应又回来了。我们依次执行queryData()函数的后3条语句

    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 on MDN。