Promise.all 结果在操作成功之前触发

Question

我正在 Whosebug 和 Github 上搜索和搜索解决方案，但 1.5 天是不够的 - 我看不出我在哪里犯了错误。我有我的组件的以下代码，我想从两个端点获取数据，并且在商店更新后我控制台记录一些东西。

class ExampleComponent extends Component {
    componentDidMount(){
    this.fetchData()
    }

  fetchData(){
    const {dispatch} = this.props
    Promise.all([
      dispatch(getTodos()),
      dispatch(getPhotos())
    ])
    .then(() => {
      console.log('I did everything!');
    });

  }
  render() {
    return (
      <h1>Something</h1>
    );
  }
}

export default connect()(ExampleComponent)

这是我的行为...

export function getPhotos() {
  return function(dispatch) {
      axios.get('https://jsonplaceholder.typicode.com/photos')
      .then((response) => {
        console.log('photos')
        dispatch({type: 'PHOTOS_REQUEST_SUCCESS',payload: response})
      })
      .catch((err) => {
        dispatch(photosRequestError(err))
      })
  }
}

export function getTodos() {
  return function(dispatch){
      axios.get('https://jsonplaceholder.typicode.com/todos')
      .then(
        (response) => {
        console.log('todos')
        dispatch({type: 'TODOS_REQUEST_SUCCESS', payload: response})
      })
      .catch((err) => {
        dispatch(todosRequestError(err))
      })
  }
}

在控制台中我得到 "I did everything"、"todos"、"photos"。我应该如何修改我的代码以先更新商店然后在控制台中记录 "I did everything"？

提前致谢

Answer 1

您需要 return 承诺本身，以便同步应用链接，因此尝试在两个函数中将 return 添加到 axios.get('endpoint/url')。

Promise.all 结果在操作成功之前触发

Promise.all result fires before actions succeed

javascript

reactjs

es6-promise

redux