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

Question

我正在 Stackoverflow 和 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))
      })
  }
}

在控制台中，我得到“我做了所有事情”、“待办事项”、“照片”。我应该如何修改我的代码以首先更新商店，然后在控制台中记录“我做了一切”？

提前致谢

Answer 1

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