1 00:00:02,190 --> 00:00:03,250 Now to come to an end, 2 00:00:03,270 --> 00:00:09,290 there are a couple of nice methods you have related to promises which sometimes can be handy. 3 00:00:09,840 --> 00:00:11,950 Let's say you have multiple promises 4 00:00:12,030 --> 00:00:18,930 which you want to orchestrate in a certain way, which means you want to make sure that they are executed 5 00:00:18,930 --> 00:00:20,880 together in a certain way. 6 00:00:20,880 --> 00:00:23,220 Now we are executing two promises here, 7 00:00:23,220 --> 00:00:26,530 get position and set timer, in this case after each other 8 00:00:26,580 --> 00:00:30,490 and for example if get position fails, set timer will not be executed, 9 00:00:30,510 --> 00:00:32,490 it will be skipped. 10 00:00:32,490 --> 00:00:36,690 Now let me go to the end of this file here and in there, 11 00:00:36,720 --> 00:00:39,050 let's say I have the same promises, 12 00:00:39,270 --> 00:00:44,780 get position and set timer, one second, 13 00:00:44,940 --> 00:00:51,550 and I want to make sure that only one of them executes and that's the one which is faster. Of course 14 00:00:51,550 --> 00:00:52,720 for this dummy example, 15 00:00:52,720 --> 00:00:57,640 you could argue if it makes sense to either get the user position or to wait for some timer but actually 16 00:00:57,640 --> 00:00:59,380 you could say yes it makes sense, 17 00:00:59,380 --> 00:01:04,390 I want to wait for one second and if I haven't gotten the position by then, then I want to do something 18 00:01:04,390 --> 00:01:05,020 else. 19 00:01:05,020 --> 00:01:09,760 Sure you could achieve the same by setting a timeout in the configuration object of get current position 20 00:01:10,090 --> 00:01:14,650 but if we didn't have that option or we had some other reasons to do it differently, 21 00:01:14,650 --> 00:01:16,270 well then here what we can do, 22 00:01:16,300 --> 00:01:20,810 we have our two promises here and now we can use Promise with a capital P, 23 00:01:20,860 --> 00:01:25,780 so the promise constructor function in the end and instead of constructing it, we can call a method, a static 24 00:01:25,780 --> 00:01:30,790 method on this promise constructor function or on this promise class if you will 25 00:01:30,910 --> 00:01:33,180 and there we have the race method. 26 00:01:33,340 --> 00:01:41,860 Now the race method takes an array of promises, so of get position and set timer for example. 27 00:01:41,860 --> 00:01:50,110 So two promises or functions that yield promises are passed into race and then race itself also returns 28 00:01:50,110 --> 00:01:56,890 a promise, a promise with the result of the fastest promise you pass to it and you could build a normal 29 00:01:56,920 --> 00:02:00,880 then catch chain here based on race, it returns a normal promise, 30 00:02:00,880 --> 00:02:07,530 the only special thing is that the data returns will be the result of the fastest promise here. 31 00:02:07,900 --> 00:02:13,030 They will both be kicked off at the same time and the one which first finishes will then be handled 32 00:02:13,030 --> 00:02:14,280 by the subsequent 33 00:02:14,380 --> 00:02:16,600 then catch promise chain. 34 00:02:16,630 --> 00:02:24,780 So here, I get back some data and we can console log that data here and here for example, if I save that 35 00:02:24,780 --> 00:02:25,980 and I reload, 36 00:02:26,070 --> 00:02:32,670 you see I get asked here and since I didn't even reply, I get done here which is the result of my timer 37 00:02:32,790 --> 00:02:40,080 because that one second timer executed faster than get position and if I then do click block here, nothing 38 00:02:40,080 --> 00:02:44,820 happens with that because race only cared about the fastest promise, 39 00:02:44,820 --> 00:02:48,030 so in this case, this was the winning promise. 40 00:02:48,030 --> 00:02:53,880 On the other hand if I reload and I click block super fast, we see now this promise failed and we don't 41 00:02:53,880 --> 00:03:00,470 see done because now the result of the second promise was discarded and that first one finished instead. 42 00:03:00,480 --> 00:03:06,840 Now it's worth noting that the other promise which didn't win is not cancelled, its results just ignored 43 00:03:06,840 --> 00:03:13,160 but for HTTP requests, it might be important to know that the request is still being sent, its result is 44 00:03:13,200 --> 00:03:13,970 just ignored. 45 00:03:14,190 --> 00:03:19,790 So race can be useful if you're only interested in one of the two conditions and you then want to use the 46 00:03:19,800 --> 00:03:22,440 result of that promise and ignore the other one. 47 00:03:23,530 --> 00:03:28,840 Sometimes you also have code that only should execute after a couple of promises have finished and 48 00:03:28,840 --> 00:03:33,540 of course you can achieve that by chaining multiple then blocks or by using async await, 49 00:03:33,580 --> 00:03:39,970 for example here this code only executes after these two promises have finished but an alternative also 50 00:03:39,970 --> 00:03:47,020 is that you use promise all, here you also pass in an array of promises and I'll go with the same promises 51 00:03:47,050 --> 00:03:54,490 as before and now here, you'll then get a normal promise as a result but the data of that promise will 52 00:03:54,490 --> 00:03:58,210 be the combined data of your other promises. 53 00:03:58,210 --> 00:04:04,960 So here I got my promise data and if we log that, you'll see that this will actually be the combination 54 00:04:05,380 --> 00:04:09,890 of all the data the individual promises resolved. 55 00:04:09,890 --> 00:04:10,160 Now 56 00:04:10,180 --> 00:04:14,530 if I reload here and I click allow, 57 00:04:18,890 --> 00:04:21,850 you see this is the result I get. 58 00:04:22,010 --> 00:04:24,840 Now this first done call here was from promise race, 59 00:04:24,880 --> 00:04:29,140 so ignore that, this here coming from line 64, 60 00:04:29,140 --> 00:04:30,900 that is from promise all 61 00:04:30,910 --> 00:04:37,780 and as you see promise data is an array where you have the data returned by each promise in the position 62 00:04:37,780 --> 00:04:38,470 of that promise 63 00:04:38,470 --> 00:04:40,450 when you passed it to promise all. 64 00:04:40,450 --> 00:04:43,570 So here, we had get position first and set timer second, 65 00:04:43,610 --> 00:04:49,660 therefore in the data array we get back here, we have the result of get position as a first argument 66 00:04:49,840 --> 00:04:52,770 and the result of set timer as a second argument. 67 00:04:52,810 --> 00:04:57,790 So this can be useful if you want to wait for all promises to finish before you then want to use the 68 00:04:57,790 --> 00:05:04,330 combine data and we could have rewritten this code for example with promise all. Of course you can also 69 00:05:04,330 --> 00:05:07,610 do some operation which is not depending on the promise data at all 70 00:05:07,630 --> 00:05:12,070 in case you just wanted to wait for a couple of things to finish before you then execute some other 71 00:05:12,070 --> 00:05:15,100 code, that's where promise all can shine. 72 00:05:15,280 --> 00:05:23,760 Important for promise all, if I reload here and I block this, then I get an error here 73 00:05:25,130 --> 00:05:32,840 and only that. So if one of the promises fails, is rejected, then the other promise is not executed and 74 00:05:32,840 --> 00:05:36,830 we're not waiting for all to resolve or all to reject 75 00:05:36,830 --> 00:05:42,710 instead we're waiting for all to resolve but for rejections, we're not waiting for all to be rejected, 76 00:05:42,920 --> 00:05:43,370 instead 77 00:05:43,430 --> 00:05:49,190 if one of them is rejected, this is cancelled and we just get the error which we could handle with a 78 00:05:49,190 --> 00:05:50,690 catch block of course. 79 00:05:50,720 --> 00:05:55,840 So it's all resolved or at least one rejected. 80 00:05:56,070 --> 00:06:02,250 If you want to wait for all resolved or all rejected and you might have such scenarios where you just 81 00:06:02,250 --> 00:06:10,460 worry about have all succeeded or have all failed, then you also have promise.all settled. 82 00:06:10,740 --> 00:06:13,050 Now that's really new, all settled 83 00:06:13,050 --> 00:06:14,790 also takes an array of promises, 84 00:06:17,480 --> 00:06:21,200 like this here, just one array though 85 00:06:21,200 --> 00:06:26,730 and then here you also have a then block which will also give you an array of the promise data 86 00:06:27,170 --> 00:06:30,370 but if I now comment this out so that we only have this going on, 87 00:06:30,470 --> 00:06:40,410 if I comment this out and i reload, if I now click block, you'll see I actually get an array with a different 88 00:06:40,410 --> 00:06:45,330 kind of data, with objects where we see the output for the first promise, 89 00:06:45,330 --> 00:06:49,500 it was rejected and the output of the second promise, it was done. 90 00:06:49,740 --> 00:06:55,590 If I reload and I click allow, we wait for all of that to happen, to get the position, for the timer to expire 91 00:06:55,980 --> 00:06:59,860 and thereafter I get an object again with the descriptions 92 00:06:59,880 --> 00:07:02,370 but now also with the values, 93 00:07:02,370 --> 00:07:08,670 so for them being resolved, they get the concrete values here, with the position and with the text of 94 00:07:08,670 --> 00:07:10,040 dummy for the timer. 95 00:07:10,260 --> 00:07:15,510 So we get a little bit of a different data, still an array but an object that describes what the promise 96 00:07:15,510 --> 00:07:21,750 did and the interesting thing here is that now since you got this detailed description, you got more 97 00:07:21,750 --> 00:07:23,310 flexibility. 98 00:07:23,310 --> 00:07:31,290 It does not cancel the execution of other promises if one of them is rejected, instead it still completes 99 00:07:31,290 --> 00:07:36,600 or looks at all of them and then gives you a detailed summary of which promise failed and which promise 100 00:07:36,600 --> 00:07:40,260 succeeded so that you can use this knowledge here 101 00:07:40,410 --> 00:07:45,390 and if I block this, we still are able to use the response of the timer for example. 102 00:07:45,390 --> 00:07:49,920 This is not cancelled and that's then different to all where if one of them failed, we cancel, 103 00:07:49,920 --> 00:07:51,070 here we don't do that, 104 00:07:51,090 --> 00:07:55,780 we always wait for all promises to be finished and then we get that detailed report 105 00:07:55,800 --> 00:07:57,020 if you want to call it like this.