Перед отправкой следующего запроса дождитесь завершения ответа ax ios. - PullRequest
Новая
       31

Перед отправкой следующего запроса дождитесь завершения ответа ax ios.

0 голосов
/ 23 апреля 2020

Я создаю приложение «Реакция-редукция». Когда приложение запускается, оно отправляет серверу запрос на вход в систему, на который сервер отвечает некоторой информацией для аутентификации. После получения данных аутентификации приложение должно отправить еще один запрос на получение данных. В настоящее время у меня есть что-то подобное для моих thunk s, которые выполняют эти действия: 

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
    })
}

Чтобы код работал, я должен дождаться завершения ответа ax ios в login перед запуском fetchData, поскольку fetchData нужны данные аутентификации для работы. Я также не хочу отправлять fetchData в login, но вместо этого вызвать его в моем компоненте, что-то вроде этого: 

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

    render() {
         // stuff
    }
}

Есть ли способ сделать топор ios последовательные звонки?

Спасибо

1 Ответ

0 голосов
/ 23 апреля 2020

в вашем редукторе авторизации после ввода LOGIN_SUCCESS или чего-то, что вы можете сказать is_Authenticated: true, поэтому в компоненте приложения вы можете видеть, действительно ли текущий пользователь выполнил вход в систему.

Пример редуктора: 

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()
        }
    }
...