javascript – 异步/等待不等待承诺解决

似乎我对await的使用不符合我的理解.

我认为异步函数和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;

减速/存储:

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
最佳答案
使用redx-thunk.由于您的reducer必须返回一个新状态,因此您无法在reducer中执行异步操作.

您可以在中间件中执行异步操作,这样您就可以自己编写中间件或使用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工作以及中间件如何工作解释here它调用reducer“应用程序处理函数”因为我将它作为事件存储而不是针对redux特定的.

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

转载注明原文:javascript – 异步/等待不等待承诺解决 - 代码日志