Tatizo la Promise Hell katika JavaScript

Tayari unajua kuwa ahadi (promises) zilianzishwa ili kutatua tatizo la kuzama kwa wito wa nyuma (callback hell). Hata hivyo, baada ya muda ilibainika kuwa ahadi pia zinaweza kuzalisha msimbo mgumu. Tatizo hili kwa mlinganisho liliitwa promise hell.

Wacha tuangalie tatizo hili kwa kutumia mifano ya msimbo. Hebu tuseme tuna kitendo getSmth, kinachopokea kigezo na kurudisha matokeo kulingana na kigezo hicho:

function getSmth(num) {
	return new Promise((resolve, reject) => {
		setTimeout(() => resolve(num * num), 1000)
	});
}

Katika kesi hii, tunafananisha operesheni muhimu (kwa mfano, kupata data kutoka kwa seva). Kama fananisho tunapita nambari kama kigezo na baada ya sekunde moja tunarudisha mraba wa nambari hiyo.

Wacha sasa tutumie kitendo chetu getSmth ndani ya kitendo kingine:

function func() {
	getSmth(2).then(res => {
		console.log(res); // itatoa 4
	});
}

func();

Tatizo la Kwanza

Mkusanyiko wa miundo ya then inayofuatana hufanya uelewa wa msimbo kuwa mgumu:

function func(){
	getSmth(2).then(res1 => {
		// tunafanya kitu
	}).then(res2 => {
		// tunafanya kitu
	}).then(res3 => {
		// tunafanya kitu
	}).then(res4 => {
		// tunafanya kitu
	}).then(res5 => {
		// tunafanya kitu
	}).then(res6 => {
		// tunafanya kitu
	});
}

func();

Tatizo la Pili

Kuna tatizo la aina nyingine pia. Sasa hebu tuseme tunataka kutumie kitendo chetu mara mbili, kisha jumlisha matokeo. Matokeo yake tutapata msimbo kama huu:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			console.log(res1 + res2); // itatoa 13
		});
	});
}

func();

Tayari inakumbusha callback hell, sivyo? Wacha tuongeze wito moja zaidi wa kitendo - msimbo utazidi kuwa mbaya:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			getSmth(4).then(res3 => {
				console.log(res1 + res2 + res3);
			});
		});
	});
}

func();

Bila shaka, tunaweza kutumia Promise.all:

function func() {
	Promise.all([getSmth(2), getSmth(3), getSmth(4)]).then(res => {
		console.log(res[0] + res[1] + res[2]);
	});
}

func();

Je, tumepata kitu kile kile? La! Katika kesi ya kwanza kila kitendo kipya kinasubiri ahadi (promise) iliyotangulia kukamilika, wakati katika kesi ya pili - ahadi zote zinateketezwa wakati huo huo. Tofauti hii itakuwa muhimu katika kesi ambayo tutataka kupitisha wito uliotangulia kwenye kitendo kifuatacho:

function func() {
	getSmth(2).then(res1 => {
		getSmth(res1).then(res2 => {
			getSmth(res2).then(res3 => {
				console.log(res3);
			});
		});
	});
}

func();