Правильный способ обработки асинхронного вызова и возврата в Typescript

Question

Я работаю над проектом Ioni c 4. Для меня это совершенно новый способ работать в Javascript / Typescript, и мне трудно понять, как правильно использовать asyn c / await / обещание и все такое.

Что у меня есть :

На странице моего приложения (назовем это tab1.page.ts) у меня есть функция, которая вызывает функцию моего сервиса:

Get_Sim_Agents() {
       this.simConfig.Get_Sim_Agents();
    }

На моей странице сервиса здесь это функция: (основа c http get функция):

/**
     * Fetch the datas in order to populate the app
     * */
    Get_Sim_Agents(){

        this.http.get(
            "http://" +
            this.ip_address +
            ":" +
            this.port +
            "/get_datas"
        ).subscribe(response => {

            var data = JSON.stringify(response, null, 2);

            try {
                var obj = JSON.parse(data);
                // here i do stuff with the retrieved data
                });

            } catch (e) {
                console.log(e);
            }
        });
    }

И все работает. Но я хотел бы, чтобы моя сервисная функция возвращала данные в виде строки, когда данные извлекаются и обрабатываются. Мне трудно найти правильный синтаксис. Вот что я попробовал:

На моем сервисе:

/**
     * Fetch the Sim_Agents from the Simulation_orchestrator in order to populate the app
     * */
    async Get_Sim_Agents() : Promise<string>{

        this.http.get(
            "http://" +
            this.simulation_orchestrator_ip_address +
            ":" +
            this.simulation_orchestrator_port +
            "/get_sim_agents"
        ).subscribe(response => {

            var data = JSON.stringify(response, null, 2);

            // here i do some stuff about the data

            return JSON.parse(data);
            });

        return 'test';
    }

На моей странице:

Get_Sim_Agents() {
        this.simConfig.Get_Sim_Agents().then((result) => {console.log(result)});
    }

С этим кодом моя функция, вызываемая на моей странице, возвращает 'test' ' сразу. Я хотел бы подождать, пока http вернет ответ сервера. Я попробовал несколько другой синтаксис, но не смог добиться того, что я хочу: confused:

Чтобы быть понятным:

То, что я ищу, это способ сделать это:

1 / Страница вызывает сервисную функцию 2 / служба выполняет запрос и получает ответ 3 / служба выполняет какие-либо действия (заполняя приложение данными в каждом примере) 4 / затем отправляет строку обратно на страницу, например «Работа выполнена»

Но все, что я мог найти, это решение, которое напрямую отправляло бы ответ службы на страницу, без предварительной обработки со стороны службы

Answer 1

То, что вы делаете, не работает, потому что Get_Sim_Agents возвращает не обещание, а строку. Да, вы делаете внутри него асинхронные вызовы, но по-прежнему возвращаете строку.

Сделайте это:

/**
     * Fetch the Sim_Agents from the Simulation_orchestrator in order to populate the app
     * */
    async Get_Sim_Agents() : Promise<string>{

        return this.http.get(
            "http://" +
            this.simulation_orchestrator_ip_address +
            ":" +
            this.simulation_orchestrator_port +
            "/get_sim_agents"
        ).toPromise().then(response => {

            var data = JSON.stringify(response, null, 2);

            // here i do some stuff about the data

            return JSON.parse(data);
        });
    }

Конечно, в зависимости от версии или Rx JS, вам необходимо убедиться, что toPromise доступен.

И, кстати, зачем вы структурируете ответ, а затем анализируете его?