异步/等待不等待 Promise 解决

Question

看来我对 的使用await不像我理解的那样表现。

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

即使我正在等待电话，它也会立即返回，并且我的控制台日志发生故障。具体来说，以“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;

减速机/存储：

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。由于您的减速器必须返回新状态，因此您无法在减速器中执行异步操作。

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

如果您分派的操作是一个函数，那么 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 将简化需要分派多个操作的异步中间件或操作。

这里解释了 redux 的工作原理以及中间件的工作原理，它调用减速器“应用程序处理函数”，因为我将其作为事件存储进行教学，而不是特定于 redux 的。

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