在发送下一个请求之前等待上一个 axios 响应完成

Question

我正在构建一个 react-redux 应用程序。当应用程序启动时，它会向服务器发送一个登录请求，服务器会回复一些身份验证信息。检索身份验证数据后，应用程序应发送另一个请求以获取数据。我目前正在为我的thunks 执行这些操作：

const login = () => (dispatch, getState) => {
    axios.get('/login/').then(res => {
        // The user doesn't have to provide their username in this case. The backend handles 
        //  authentication for us automatically and sends back the auth data
        let {username, staff_id, first_name, last_name, groups} = res.data
        dispatch(auth(username, staff_id, first_name, last_name, groups))
    }) // save authentication info to redux state
}

const fetchData= () => (dispatch, getState) => {
    let myUsername = getState().auth.username
    axios.get(`/staff/${myUsername}`).then(res => {
       // stuff
    })
}

为了使代码工作，我必须在运行fetchData 之前等待login 中的axios 响应完成，因为fetchData 需要身份验证数据才能工作。我也不想在login 中调度fetchData，而是在我的组件中调用它，如下所示：

class App extends Component {
    componentDidMount() {
        this.props.login()
        // how do I dispatch fetchData here?
    }

    render() {
         // stuff
    }
}

有什么方法可以让 axios 调用顺序？

谢谢

Answer 1

在 LOGIN_SUCCESS 类型或您可以说 is_Authenticated: true 之后的 auth reducer 中，因此在 App 组件中您可以查看当前用户是否登录。

减速器示例：

import {LOGIN_SUCCESS} from '../types'  
const authState = {
    isAuthenticated: false
}

export default (state=authState, action) => {
    switch(action.type){
        case LOGIN_SUCCESS:
            return {
                ...state,
                isAuthenticated: true,
            }
        ...
        default:
            return state

应用组件示例：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {fetchData} from './actions' // actions route
import {connect} from 'react-redux'

class App extends Component {
    static propTypes = {
        is_Authenticated: PropTypes.bool.isRequired,
        fetchData: PropTypes.func.isRequired
    }
    componentDidMount = () => { 
        if(this.props.is_Authenticated){
            this.props.fetchData()
        }
    }