Как я могу получить ответ от отправки?

Question

У меня есть компонент, который имеет форму, в которой в данный момент, чтобы сделать нажатие на кнопку отправки, я вызываю функцию handleSubmit (она на моем компоненте), эта функция вызывает действие через dispatch, и это действие , Я звоню в сервис (HTTP Request).

handleSubmit

handleSubmit = (e) => {
   e.preventDefault()
   const { validateFields } = this.props.form;

   validateFields((err, params) => {
       if (!err) {
            const { user, dispatch } = this.props;

            let response = dispatch(actions.addDevice(params))
            console.log(response); //Response is undefined
       }
    });
}

actions.addDevice

function addDevice(params){
    return (dispatch, getState) => {
        let { authentication } = getState();
        dispatch(request({}));

        service.addDevice(params, authentication.user.access_token)
            .then(
                response => {
                    if(response.status === 201) {
                        dispatch(success(response.data));
                    }
                    return response;
                },
                error => {
                    dispatch(failure(error.toString()));
                    dispatch(alertActions.error(error.toString()));
                }
            )
    }

    function request(response) { return { type: constants.ADD_DEVICE_REQUEST, response } }
    function success(response) { return { type: constants.ADD_DEVICE_SUCCESS, response } }
    function failure(error) { return { type: constants.ADD_DEVICE_FAILURE, error } }
}

service.addDevice

function addDevice(params, token){
    return axios({
        url: 'http://localhost:5000/user/add-device',
        method: 'POST',
        headers: { 'Authorization': 'Bearer ' + token},
        data: {
            data1: params.data1,
            data2: params.data2,
            data3: params.data3
        }
    })
    .then(function(response) {
        return response;
    })
    .catch(function(error) {
        return error.response;
    });
}

Я хотел бы получить ответ в своем компоненте, чтобы иметь возможность выполнять проверки, но поскольку запрос является асинхронным, я никогда не могу получить ответ и печатает только неопределенную переменную. Как я могу получить синхронизацию ответа? Или что мне нужно сделать, чтобы иметь возможность делать проверки?

Answer 1

Вы не возвращаете обещание service.addDevice.

Так что вы можете сделать return service.addDevice..., а в handleSubmit вы делаете dispatch(...).then((data) => ...do something with the data...)

Answer 2

let response = dispatch(actions.addDevice(params)) 

это асинхронно. Поэтому неудивительно, что undefined возвращает из console.log (). console.log () выполняется даже до завершения процесса отправки. Используйте обещание или асинхронное ожидание синтаксиса. Я бы порекомендовал использовать синтаксис async-await.

handleSubmit = (e) => {
   e.preventDefault()
   const { validateFields } = this.props.form;

   validateFields(async (err, params) => {
       if (!err) {
            const { user, dispatch } = this.props;

            let response =await dispatch(actions.addDevice(params))
            console.log(response); //Response is undefined
       }
    });
}

Answer 3

Пожалуйста, замените ваш код на этот код

handleSubmit

handleSubmit = (e) => {
   e.preventDefault()
   const { validateFields } = this.props.form;

   validateFields((err, params) => {
       if (!err) {
            const { user, dispatch } = this.props;

            dispatch(actions.addDevice(params)).then((response)=>{
                  console.log(response);
            })
       }
    });
}

actions.addDevice

function addDevice(params){
    return (dispatch, getState) => {
        let { authentication } = getState();
        dispatch(request({}));

        return service.addDevice(params, authentication.user.access_token)
            .then(
                response => {
                    if(response.status === 201) {
                        dispatch(success(response.data));
                    }
                    return response;
                },
                error => {
                    dispatch(failure(error.toString()));
                    dispatch(alertActions.error(error.toString()));
                }
            )
    }

    function request(response) { return { type: constants.ADD_DEVICE_REQUEST, response } }
    function success(response) { return { type: constants.ADD_DEVICE_SUCCESS, response } }
    function failure(error) { return { type: constants.ADD_DEVICE_FAILURE, error } }
}