Saya mencoba membuat formulir yang memungkinkan Anda membuat banyak sumber daya secara berurutan.

Contoh di bawah ini

Floor 1
Floor 2
Floor 3
...
Floor 9

Masalah dengan kode adalah pesanan tidak dijamin.

Kode saya di bawah ini

let startAt = this.addAreasForm.controls['startAt'].value
const name = this.addAreasForm.controls['name'].value
const newArea = {name: name}

for (let i = 1; i < (amount + 1); i++) {
  newArea.name = name + ' ' + startAt
  startAt++
  this.areasService.createArea(newArea, parentId)
    .subscribe(
      area => this.added.emit(area)
    )
}

Bisa kembali seperti

Floor 2
Floor 3
Floor 1
Floor 5
Floor 4

Bagaimana Anda menangani panggilan api async untuk menjamin urutan berurutan?

5
locnguyen 17 Agustus 2017, 17:00

2 jawaban

Jawaban Terbaik

Anda dapat menggunakan async / await untuk tujuan itu dengan ketetapan Janji:

for (let i = 1; i < (amount + 1); i++) {
    await new Promise(resolve => {
        newArea.name = name + ' ' + startAt
        startAt++
        this.areasService.createArea(newArea, parentId)
            .subscribe(
                area => { 
                    this.added.emit(area);
                    resolve();
                });
        });
}

Ingatlah untuk meletakkan async sebelum fungsi Anda. Lihat DEMO PLUNKER ini.

4
Faisal 17 Agustus 2017, 14:04

Anda dapat mencoba sesuatu seperti ini, saya tidak benar-benar semua kode Anda dari layanan Anda, tetapi ide utamanya adalah ini: Untuk mengeksekusi kode async secara berurutan, Anda dapat membuat serangkaian janji dan kemudian menggunakan Promise.all untuk ambil setiap hasil dalam urutan yang sama dari pembuatan: Promise.all

let startAt = this.addAreasForm.controls['startAt'].value;
const name = this.addAreasForm.controls['name'].value;
const newArea = {name: name};

Simpan layanan Anda ke dalam variabel yang saya tidak tahu dari mana konteks Anda berasal.

 const areasService = this.areasService,
    added = this.added;

Buat fungsi yang membuat janji untuk berlangganan Anda:

function createAreaPromise(newArea, parentId) {
    return new Promise((resolve, reject) => {
        areasService.createArea(newArea, parentId)
            .subscribe(area => resolve(area));
    });
}

Dari fungsi lain untuk membangun beberapa array janji:

function buildPromises() {
    let promises = [];

    for (let i = 1; i < (amount + 1); i++) {
      newArea.name = name + ' ' + startAt
      startAt++
      promises.push(createAreaPromise(newArea, parentId));
    }

    return promises;
}

Kemudian selesaikan dengan Promise.all, untuk mendapatkan urutan yang sama dari penciptaan

let promises = buildPromises();
Promise.all(promises)
    .then(results => {
        results.forEach(result => added.emit(result));
    });

Berikut contoh langsung:

function random() {
	return Math.floor(Math.random() * 5);
}

function makePromise(index) {
	return new Promise((resolve) => {
		setTimeout(() => {
			resolve(index);
		}, random() * 1000);
	});
}

function buildPromises() {
	let promises = [];
	for(let i = 0; i < 5; i++) {
		promises.push(makePromise(i));
	}

	return promises;
}

let promises = buildPromises();
Promise.all(promises)
	.then(results => {
		results.forEach(result => {
			console.log(result);
		});
	});
1
Alexandru Buturuga 17 Agustus 2017, 14:35