Как запустить 2 для циклов последовательно, используя Angular 5

Question

Я пытаюсь изменить порядок табуляции в угловых. Мне нужно запустить 2 цикла, потому что я использую mongodb, который не допускает дублирования значений. Поэтому во время первого цикла я сбрасываю значение на случайное число, а затем устанавливаю правильное значение индекса заказа. Однако, когда я пытаюсь запустить приведенный ниже код, он не выполняется последовательно.

updateTabsOrder(){
    for(let i=0; i<this.rearrangedTabs.length; i++){
        this._dataService.updateTabsOrder(this.rearrangedTabs[i].id, Math.random())
        .subscribe((response) => {
          console.log('a');
        })
      }
    for(let i=0; i<this.rearrangedTabs.length; i++){
        this._dataService.updateTabsOrder(this.rearrangedTabs[i].id, i+1)
        .subscribe((response) => {
          console.log('b');
        })
      }
    }

Услуги:

updateTabsOrder(tab_id, order_index){
        return this.http.put(this.base_url + 'manufacturer_tabs/' + tab_id, {
            order_index: order_index
        })
        .map(data => {
            return data;
        });
    }

/ * JSON * /

[
    {
        "order_index": 2,
        "tab_name": "tab 1",
        "createdAt": "2018-04-24T12:46:41.890Z",
        "updatedAt": "2018-04-24T14:38:05.138Z",
        "manufacturers": "5acf62cf080d700c2209d40b",
        "id": "5adf2731366e1a0e4085a4f3"
    },
    {
        "order_index": 1,
        "tab_name": "tab 2",
        "createdAt": "2018-04-24T12:46:47.985Z",
        "updatedAt": "2018-04-24T14:09:15.919Z",
        "manufacturers": "5acf62cf080d700c2209d40b",
        "id": "5adf2737366e1a0e4085a4f4"
    }
]

Вышеприведенный код выводится как:

b
a
b

Вместо

a
a
b
b

Answer 1

Javascript это асинхронный язык.

updateTabsOrder() {

    this.rearrangedTabs.map((item, index, object) => {
        console.log(item.id + ' ' + (index + 1));
        this._dataService.updateTabsOrder(item.id, Math.random())
            .subscribe((response) => {
                console.log('a');
            });
        return item;
    }).map((item, index, object) => {
        console.log(item.id + ' ' + (index + 1));

        this._dataService.updateTabsOrder(item.id, index + 1)
            .subscribe((response) => {
                console.log('b');
            });
        return item;
    });
}

Answer 2

Вы можете использовать обещание все, чтобы дождаться первой партии и второй партии. Я использую map() для простоты.

async updateTabsOrder(){
    // make sure that tabs is an Array and we can call .map
    const rearrangedTabs = Array.from(this.rearrangedTabs);

    // run the first batch of requests to the server
    const randomizingPromises = rearrangedTabs.map(tab => 
             this._dataService.updateTabsOrder(tab.id, Math.random()).toPromise()
    );

    // wait until all requests from the first batch to the server finish
    await Promise.all(randomizingPromises).then(() => console.log("finished randomizing order"));

    // run the second batch of requests to the server   
    const finalPromises = rearrangedTabs.map((tab, i) =>
            this._dataService.updateTabsOrder(tab.id, i+1).toPromise()
    );

    // wait until all requests from the second batch to the server finish
    await Promise.all(finalPromises).then(() => console.log("finished final order"));

    console.log("finished all");
}

Это будет оцениваться в два этапа:

1. Отправить все случайные данные одновременно. Дождитесь окончания каждого запроса рандомизации.
2. Отправить все правильные данные заказа сразу. Дождитесь окончания каждого запроса.