Autoplay

    Maintaining structure whilst asyncing

    Brian LonsdorfBrian Lonsdorf

    We take our Promise.all() analogy further by using traversable on a Map(). Then we use two traversals in the same workflow.

    javascriptJavaScript
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Say we have a map of a subject home that gives route to the index page, maybe about. It goes to a route about us, and blog goes blog. Now, we're putting this in a map, so we can have the ability to map over it.

    00:16 When you over a map, it gives you each value. We get our routes here inside the function. What we want to do is do an HTTP GET, which just pops it in a task and giving us fake results here, these are path results.

    00:29 Now, we have our routes. We'll call HTTP GET with our routes, and no parameters. We have a similar situation as we've seen before. Each of these inner values will be a task now. We'd end up with a map with home. Instead of this string here, we have our task of HTML, because that's what we've, in this case, task of path results.

    00:49 We would rather, instead of a bunch of these key be tasks, we would want one task on the outside and all these keys to be already resolved. We can do that again with this lovely traverse function, which we have to give task.of as the first argument, which matches the return type of this function.

    01:07 With that, we end up with a console.error, console.log here. One task on the outside and then map of results. Let's go and run this. There we are. We have a home and it has results and about, and has results, and so on and so forth. It's very nice. It gives us the ability to hold a structure in place. Then, we can go ahead and traverse within that.

    01:33 In fact, we can traverse as much as we'd like. We can actually throw another traverse inside this. Let's say each of these had an array of routes. There's that and home, and so on and so forth. Let's just pop this an array, and let's get rid of this one.

    01:48 Now, since we are trying to run each, instead of mapping and then mapping again, we just traverse and traverse again. We get these routes, and we can go ahead and call routes.traverse, test.of, and we get a route here. There we go.

    02:02 Now, of course, this array does not have a traverse function, so we have to put this in a list. There we go. Let's give ourselves some room here, and there we are. This goes through each at these nested structures, and then propagates the task all the way to the outside, so we know when it's totally finished.

    02:22 There we are. We have a home of a list of each results. This is very powerful if you have a big nested tree or file system, and you want to traverse the structure without having to do any bookkeeping, taking it apart and putting it back together, or any mutation at all.

    Discuss

    Discuss