Альтернатива в синхронный AJAX

Я делаю консультацию AJAX, чтобы ему распределяет стоимость в переменную который, если, или если она должна быть объявленной в другой функции (я использую React). У меня есть следующий код:

В функции A:

var datos = getAllProfessionals();

В getAllProfessionals ():

function getAllProfessionals() {
    var jsonResponse;
    $.ajax({
        type: 'GET',
        url: urlAjaxGetAllProfessionals, // Defined at HTML file
        async: false
    }).done(function(response) {
        jsonResponse = response;
    });
    return jsonResponse;
},

Я оказался обязанным помещать Async: false потому что без этих данных нет ничего, что можно показывать на странице, и ты подпираешь, если, или если он должен храниться в данных. Но я не могу делать

...
}).done(function(response) {
        return response;
});

И если я оставляю переменную вне функции, $ .ajax () теряет стоимость, потому что он асинхронный.

Что у меня есть альтернативы, чтобы избегать помещать async: false и получать ответ без проблем?

1
задан 28.12.2016, 07:57
1 ответ

Ты должен иметь в виду, что компоненты React функционируют как машины состояния, Дата компонента в React всегда происходит уже принадлежите state или props (properties), когда своры охотничьих собак state или props компонент React автоматически реагирует на эти изменения и возвращается в renderizar делая необходимым, чтобы изменять вид реализовывая самые меньшие возможные изменения в DOM. твое решение сломай вся эту концепцию и ты не используешь React, для которого он был создан, так как ты не mutando состояние в зависимости от ответа сервера и не используешь компонент React, чтобы делать обновления в виде.

Сосредоточись на следующем осуществлении (ES6)

import React from 'react'
import update from 'react-addons-update'
import superagent from 'superagent'

export default class ProfesionalsListComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            profesionalList:    [],   // La lista de profesionales
            errorMensaje:       null, // Si hay un error
            estaCargando:       false // Si estoy haciendo la peticion
        }
    }

    componentWillMountMount() {
        let self = this;

        this.setState(update(
            this.state,
            {
                estaCargando: {$set: true}
            }
        ));

        superagent.get(urlDelEndpoint)
            .set('Accept', 'application/json')
            .end(function(error, response){
                if(error) {
                    self.setState(update(
                        self.state,
                        {
                            error: {$set: 'Error al recuperar listado de profesionales'},
                            profesionalList: {$set: []},
                            estaCargando: {$set: false}
                        }
                    ));
                } else {
                    let data = response.body;
                    this.setState(update(
                        self.state,
                        {
                            error: {$set: null},
                            profesionalList: {$set: data},
                            estaCargando: {$set: false}
                        }
                    ));
                }
            });
    }

    render() {
        let contenido = null;

        if(this.state.errorMensaje) {
            contenido = (
                <div>
                    <h2>Hubo un problema!</h2>
                    <span>{this.state.errorMensaje}</span>
                </div>
            );
        } else {
            let profesionalesItems = [];
            _.each(this.state.profesionalList, function(profesional){
                profesionalesItems.push(
                    <li>{profesional.nombre} {profesional.apellido}</li>
                )
            });

            contenido = (
                <ul>
                    { profesionalesItems }
                </ul>
            )
        }

        let cargando = null;

        if(this.state.estaCargando) {
            cargando = (
                <div>
                    <span>Cargando la informacion, espere por favor... </span>
                </div>
            )
        }

        return(
            <div>
                <h1>Listado de profesionales</h1>
                { cargando }
                { contenido }
            </div>
        )
    }
}

Просьба ajax осуществляется в момент собирания компонента, компонент решает, что контент renderizar в зависимости от состояния, тебя только своры охотничьих собак состояние и вид будет реагировать аккорд.

3
ответ дан 03.12.2019, 18:28
  • 1
    Превосходный ответ! Спасибо за доставление меня из полного неведения! Сейчас я имею общее, как приспосабливание этого к моей атмосфере, так как я не использую node.js и не нахожу способ это импортировать –  29.12.2016, 16:42
  • 2
    @Genarito, Если ты не используешь Node.js тогда только, ты должен перемещать это в notació n ES5, librerí в superagent ты можешь заменять ее простым вызовом ajax используя jQuery $ .ajax (...) и вместо того, чтобы использовать lodash используй funció n .each jQuery, в ES6 размещенное слово ' let' служи для того, чтобы объявить локальные переменные, это ты это можешь remplazar из-за простого ' var'. –  29.12.2016, 17:16
  • 3
    Ты прошел! Уже он вооружал вопрос, предназначенный для этой новой проблемы! Большое спасибо! –  29.12.2016, 17:19

То, что ты можешь реализовывать, состоит в том, чтобы звонить в функцию, когда информация была получена (функция callback). Для этого ты можешь помещать признак success с именем функции, в которую ты хочешь переместить его данные в твоем вызове ajax, и когда информация будет получена, он позвонит в эту функцию перемещая его как параметры информацию, которая была получена.

Осталось бы нечто похожее:

$.ajax({
    type: 'GET',
    url: urlAjaxGetAllProfessionals, // Defined at HTML file
    async: false,
    success: reciboParametros
})

function reciboParametros(parametros) {
    //Aquí iría el código que trabajara con los parámetros recibidos
}
2
ответ дан 24.11.2019, 11:59
  • 1
    Конечно тема состоит в том, что React JS использует mé каждый так называемый componentDidMount (), что называется automá ticamente, и ahí он, где они объявляют себе переменные, в которых я нуждаюсь, тогда я не буду мочь помещать это в success – Genarito 19.12.2016, 17:20
  • 2
    @Genarito Правда, которую я не знаю, как функционирует React JS, но я понимаю, что podrá s называть funció n как только были получены данные. – Francisco Romero 19.12.2016, 17:23
  • 3
    Конечно я могу называть funció n, но React это делает implí citamente. Когда он это сделает, если todaví на мой AJAX не вышел ответ тогда я arrojarí в ошибку, потому что estarí в пробуя использовать informació n, что todaví в tiene – Genarito 19.12.2016, 17:25
  • 4
    @Genarito Тогда я понимаю, что он podrá s помещать внутри счастья funció n condició n. Если pará метры недействительные, тогда, что ничего не сделал, и если они это не состоят, в том, чтобы он инициализировал данные. Таким образом ты asegurará s, что не производит тебе ошибку. – Francisco Romero 19.12.2016, 17:31
  • 5
    Давайте пробовать! Тысячи, спасибо за время берет ответа – Genarito 19.12.2016, 17:42

Теги

Похожие вопросы