Promise/async/await PlantUML

Promise-01.pu

@startuml

title Promise-01.js

activate "<top>"
"<top>" -> "main()"
activate "main()"
  group main()
  "main()" -> "subroutine()"
  activate "subroutine()"
    group subroutine()
    "subroutine()" -> "background_procedure()" : callback_at_late, 'BACKGROUND'
    activate "background_procedure()"
      group background_procedure()
      "background_procedure()" -> "background_promise" : new Promise()
      activate "background_promise"
      note right: pending
        "background_promise" -> "setTimeout()" : callback, 3000, param, background_resolve, background_reject
        activate "setTimeout()"
          "setTimeout()" -> "setTimeout()" : 予約:3000msec後にcallback()
        "background_promise" <-- "setTimeout()"
        deactivate "setTimeout()"
      "background_procedure()" <<-- "background_promise" : background_promise
      end background_procedure()
    "subroutine()" <-- "background_procedure()" : background_promise
    deactivate "background_procedure()"
    "subroutine()" -> "background_promise" : background_promise.then(function...
    note right: foreground_procedure_01()\nforeground_procedure_02()
    "subroutine()" <<-- "background_promise"
    end subroutine()
  "main()" <-- "subroutine()" : `subroutine(${background_result})`
  deactivate "subroutine()"
  "main()" -> "foreground_procedure_*()" : subroutine_result
  activate "foreground_procedure_*()"
  note right: 03
  "main()" <-- "foreground_procedure_*()"
  deactivate "foreground_procedure_*()"
  "main()" -> "foreground_procedure_*()" : subroutine_result
  activate "foreground_procedure_*()"
  note right: 04
  "main()" <-- "foreground_procedure_*()"
  deactivate "foreground_procedure_*()"
  end main()
"<top>" <-- "main()"
deactivate "main()"
deactivate "<top>"
... setTimeout()呼び出しから約3000msec ...
        group callback_at_late()
        "setTimeout()" ->> "callback_at_late()" : param, resolve, reject
        activate "callback_at_late()"
        note right: BACKGROUND
        end callback_at_late()
        "background_promise" <<-- "callback_at_late()" : resolve(`callback_at_late(${param})`)
        note left: fulfilled
        deactivate "callback_at_late()"
        group background_promise.then()
        "background_promise" -> "foreground_procedure_*()" : background_result
        activate "foreground_procedure_*()"
        note right: 01
        "background_promise" <-- "foreground_procedure_*()"
        deactivate "foreground_procedure_*()"
        "background_promise" -> "foreground_procedure_*()" : background_result
        activate "foreground_procedure_*()"
        note right: 02
        "background_promise" <-- "foreground_procedure_*()"
        deactivate "foreground_procedure_*()"
        end background_promise.then()

@enduml

Promise-02.pu

@startuml

title Promise-02.js

activate "<top>"
"<top>" -> "main()"
activate "main()"
  group main()
  "main()" -> "subroutine()"
  activate "subroutine()"
    group subroutine()
    "subroutine()" -> "subroutine_promise" : new Promise()
    activate "subroutine_promise"
    note right: pending
      "subroutine_promise" -> "background_procedure()" : callback_at_late, 'BACKGROUND'
      activate "background_procedure()"
        group background_procedure()
        "background_procedure()" -> "background_promise" : new Promise()
        activate "background_promise"
        note right: pending
          "background_promise" -> "setTimeout()" : callback, 3000, param, background_resolve, background_reject
          activate "setTimeout()"
            "setTimeout()" -> "setTimeout()" : 予約:3000msec後にcallback()
          "background_promise" <-- "setTimeout()"
          deactivate "setTimeout()"
        "background_procedure()" <<-- "background_promise" : background_promise
        end background_procedure()
      "subroutine_promise" <-- "background_procedure()" : background_promise
      deactivate "background_procedure()"
      "subroutine_promise" -> "background_promise" : background_promise.then(function...
      note right: foreground_procecure_01()\nforeground_procedure_02()
      "subroutine_promise" <<-- "background_promise"
    "subroutine()" <<-- "subroutine_promise" : subroutine_promise
    end subroutine()
  "main()" <-- "subroutine()" : subroutine_promise
  deactivate "subroutine()"
  "main()" -> "subroutine_promise" : subroutine_promise.then(function...
  note right: foreground_procecure_03()\nforeground_procedure_04()
  "main()" <<-- "subroutine_promise"
  end main()
"<top>" <-- "main()"
deactivate "main()"
deactivate "<top>"
... setTimeout()呼び出しから約3000msec ...
        group callback_at_late()
        "setTimeout()" ->> "callback_at_late()" : param, resolve, reject
        activate "callback_at_late()"
        note right: BACKGROUND
        end callback_at_late()
        "background_promise" <<-- "callback_at_late()" : resolve(`callback_at_late(${param})`)
        note left: fulfilled
        deactivate "callback_at_late()"
        group background_promise.then()
        "background_promise" -> "foreground_procedure_*()" : background_result
        activate "foreground_procedure_*()"
        note right: 01
        "background_promise" <-- "foreground_procedure_*()"
        deactivate "foreground_procedure_*()"
        "background_promise" -> "foreground_procedure_*()" : background_result
        activate "foreground_procedure_*()"
        note right: 02
        "background_promise" <-- "foreground_procedure_*()"
        deactivate "foreground_procedure_*()"
        end background_promise.then()
        "subroutine_promise" <<-- "background_promise" : `subroutine_resolve(`subroutine(${background_result})`)
        note left: fulfilled
      group subroutine_promise.then()
      "subroutine_promise" -> "foreground_procedure_*()" : subroutine_result
      activate "foreground_procedure_*()"
      note right: 03
      "subroutine_promise" <-- "foreground_procedure_*()"
      deactivate "foreground_procedure_*()"
      "subroutine_promise" -> "foreground_procedure_*()" : subroutine_result
      activate "foreground_procedure_*()"
      note right: 04
      "subroutine_promise" <-- "foreground_procedure_*()"
      deactivate "foreground_procedure_*()"
      end subroutine_promise.then()

@enduml

sample-01.pu

@startuml

title sample-01.js

activate "<top>"
"<top>" -> "main()"
activate "main()"
  group main()
  "main()" -> "subroutine()"
  activate "subroutine()"
    group subroutine()
    "subroutine()" -> "background_procedure()" : callback_at_late, 'BACKGROUND'
    activate "background_procedure()"
      group background_procedure()
      "background_procedure()" -> "setTimeout()" : callback, 3000, param
      activate "setTimeout()"
        "setTimeout()" -> "setTimeout()" : 予約:3000msec後にcallback()
      "background_procedure()" <-- "setTimeout()"
      deactivate "setTimeout()"
      end background_procedure()
    "subroutine()" <-- "background_procedure()"
    deactivate "background_procedure()"
    "subroutine()" -> "foreground_procedure_*()" : background_result
    activate "foreground_procedure_*()"
    note right: 01
    "subroutine()" <-- "foreground_procedure_*()"
    deactivate "foreground_procedure_*()"
    "subroutine()" -> "foreground_procedure_*()" : background_result
    activate "foreground_procedure_*()"
    note right: 02
    "subroutine()" <-- "foreground_procedure_*()"
    deactivate "foreground_procedure_*()"
    end subroutine()
  "main()" <-- "subroutine()" : `subroutine(${background_result})`
  deactivate "subroutine()"
  "main()" -> "foreground_procedure_*()" : subroutine_result
  activate "foreground_procedure_*()"
  note right: 03
  "main()" <-- "foreground_procedure_*()"
  deactivate "foreground_procedure_*()"
  "main()" -> "foreground_procedure_*()" : subroutine_result
  activate "foreground_procedure_*()"
  note right: 04
  "main()" <-- "foreground_procedure_*()"
  deactivate "foreground_procedure_*()"
  end main()
"<top>" <-- "main()"
deactivate "main()"
deactivate "<top>"
... setTimeout()呼び出しから約3000msec ...
        group callback_at_late()
        "setTimeout()" ->> "callback_at_late()" : param
        activate "callback_at_late()"
        note right: BACKGROUND
        end callback_at_late()
        deactivate "callback_at_late()"

@enduml