javascript - 异步/等待不等待 promise 解决

Question

我对 await 的使用似乎与我理解的不一样。

我认为 async 函数和 await 关键字可以用于返回 promise 的调用(例如 navigator.mediaDevices.getUserMedia) 并且它会暂停函数执行(就像生成器函数)直到 promise 解决，然后它会继续执行该函数。

尽管我正在等待调用，但它会立即返回，并且我的控制台日志发生故障。具体来说，以“reducer”开头的控制台日志出现在以“getter”开头的日志之前的控制台中，当它应该相反/与(我认为)堆栈跟踪应该运行的方式相反。

谁能告诉我这是怎么回事？

异步辅助函数 getter :

const getLocalStream = async () => {
  try {
    const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    console.log('getter localStream', localStream);
    console.log('about to return')
    return localStream;
  }
  catch (err) {
    console.error(err);
  }
}

export default getLocalStream;

reducer /存储:

import getLocalStream from './getLocalStream';

const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'SEND_CALL': {
      const { id } = action;
      const localStream =  getLocalStream();
      console.log('reducer localStream', localStream);
      const call = state.peer.call(id, localStream);
      return { ...state, call };
    }
    default: 
      return state;
  }
};

控制台:

reducer localStream Promise {<pending>}
Uncaught TypeError: Failed to execute 'addStream' on 'RTCPeerConnection': parameter 1 is not of type 'MediaStream'
getter localStream MediaStream {id: "B6Foz1jheGvnMqjiqC4PFoOvUVahF04zigzm", active: true, onaddtrack: null, onremovetrack: null, onactive: null, …}
about to return

Answer 1

使用redx-thunk .由于您的 reducer 必须返回新状态，因此您不能在 reducer 中执行异步操作。

您可以在中间件中进行异步操作，因此您可以自己编写中间件或使用 redux-thunk。

如果您分派(dispatch)的 Action 是函数，thunk 将使用 dispatch 和 getState 函数执行该函数。

//create send call action
const createSendCall = id => 
  async dispatch => {
    const localStream =  await getLocalStream();
    console.log('reducer localStream', localStream);
    const call = state.peer.call(id, localStream);
    dispatch(createDoneSend(call));
  }
//create done send action
const createDoneSend = call => ({
  type:"DONE_SEND",
  call
})

//reducer, SEND_CALL never comes here because it's handled in middle ware
switch (action.type) {
  case 'DONE_SEND': {
    return { ...state, call:action.call };
  }
  default: 
    return state;

Thunk 将简化异步中间件或需要分派(dispatch)多个操作的操作。

redux 的工作原理和中间件的工作原理详解here它称 reducer 为“应用程序处理函数”，因为我将其作为事件存储进行教学，而不是特定于 redux。

可以找到 redux 不接受 promises 作为状态而只是在解析时设置状态的原因 here .当待处理的过滤器请求被来自用户的更新请求替换时，待处理的过滤器将拒绝，这是应该发生的，但 redux 怎么知道 promise 应该拒绝？因此，如果我们必须解决，那么我们如何告诉 redux 在旧的待处理请求解决时不要设置状态？这些问题基本上可以通过 reducer 不返回 promises 并在中间件中处理来解决。