JS - async function
Asynchrone functies bieden een betere syntaxis voor code waarin gebruikt wordt gemaakt van een Promise. Om asynchrone functies te gebruiken, moeten we dus begrijpen wat een Promise is. Ze worden uitgelegd in JS - Promises.
Een asynchrone functie wordt gedeclareerd met het async-sleutelwoord, met daarin eventueel het await-sleutelwoord.
Met de sleutelwoorden async en await kan asynchroon, op een Promise gebaseerd gedrag, in een schonere stijl worden geschreven en dan is het niet nodig om expliciet Promise chains te configureren.
Een asynchrone functie kan ook worden gedefinieerd als async function expression.
Wat heb je nodig?
In de voorbeeldcode willen we een asynchrone functie maken. Om dat te illustreren maken we gebruik van de Geodata stad Antwerpen website. De stad Antwerpen beschikt over een schat aan geografische data over de stad. Via dit portaal kunne we van die deze geografische data gebruik maken in onze app's. Lees zeker de licentieovereenkomst!
We vragen een json bestand op met de gegevens over de rechtbanken in Antwerpen. De url hiervoor is:
https://geodata.antwerpen.be/arcgissql/rest/services/P_Portal/portal_publiek1/MapServer/43/query?where=1%3D1&outFields=*&outSR=4326&f=json
Dat is het resultaat:
{
"displayFieldName": "id",
"fieldAliases": {
"id": "id",
"thema": "thema",
"type": "type",
"subtype": "subtype",
"naam": "naam",
"straat": "straat",
"huisnummer": "huisnummer",
"postcode": "postcode",
"district": "district",
"lgst_niv": "lgst_niv",
"hgst_niv": "hgst_niv",
"grondopp": "grondopp",
"gebo": "gebo",
"pero": "pero",
"begindatum": "begindatum",
"OBJECTID": "ObjectID",
"GISID": "GISID"
},
"geometryType": "esriGeometryPoint",
"spatialReference": {
"wkid": 4326,
"latestWkid": 4326
},
"fields": [
{
"name": "id",
"type": "esriFieldTypeString",
"alias": "id",
"length": 8
},
{
"name": "thema",
"type": "esriFieldTypeString",
"alias": "thema",
"length": 50
},
{
"name": "type",
"type": "esriFieldTypeString",
"alias": "type",
"length": 50
},
{
"name": "subtype",
"type": "esriFieldTypeString",
"alias": "subtype",
"length": 80
},
{
"name": "naam",
"type": "esriFieldTypeString",
"alias": "naam",
"length": 85
},
{
"name": "straat",
"type": "esriFieldTypeString",
"alias": "straat",
"length": 80
},
{
"name": "huisnummer",
"type": "esriFieldTypeString",
"alias": "huisnummer",
"length": 12
},
{
"name": "postcode",
"type": "esriFieldTypeString",
"alias": "postcode",
"length": 4
},
{
"name": "district",
"type": "esriFieldTypeString",
"alias": "district",
"length": 30
},
{
"name": "lgst_niv",
"type": "esriFieldTypeString",
"alias": "lgst_niv",
"length": 50
},
{
"name": "hgst_niv",
"type": "esriFieldTypeString",
"alias": "hgst_niv",
"length": 50
},
{
"name": "grondopp",
"type": "esriFieldTypeDouble",
"alias": "grondopp"
},
{
"name": "gebo",
"type": "esriFieldTypeString",
"alias": "gebo",
"length": 14
},
{
"name": "pero",
"type": "esriFieldTypeString",
"alias": "pero",
"length": 14
},
{
"name": "begindatum",
"type": "esriFieldTypeDate",
"alias": "begindatum",
"length": 8
},
{
"name": "OBJECTID",
"type": "esriFieldTypeOID",
"alias": "ObjectID"
},
{
"name": "GISID",
"type": "esriFieldTypeString",
"alias": "GISID",
"length": 20
}
],
"features": [
{
"attributes": {
"id": "PUB041",
"thema": "publiek",
"type": "rechtbank",
"subtype": "rechtbank",
"naam": "Justitiepaleis - Rechtbank 1ste aanleg/Arbeid/Koophandel/Vredegerecht 1-7 kan",
"straat": "BOLIVARPLAATS",
"huisnummer": "20",
"postcode": "2000",
"district": "Antwerpen",
"lgst_niv": "stedelijk",
"hgst_niv": "stadsgewest",
"grondopp": 14643.76,
"gebo": "GEBO2000169092",
"pero": " ",
"begindatum": 1072915200000,
"OBJECTID": 4591,
"GISID": null
},
"geometry": {
"x": 4.387529163477163,
"y": 51.203811298489775
}
},
{
"attributes": {
"id": "PUB040",
"thema": "publiek",
"type": "rechtbank",
"subtype": "rechtbank",
"naam": "Jeugdrechtbank",
"straat": "KONINGIN ELISABETHLEI",
"huisnummer": "18",
"postcode": "2018",
"district": "Antwerpen",
"lgst_niv": "stedelijk",
"hgst_niv": "stedelijk",
"grondopp": 526.5,
"gebo": "GEBO2000063510",
"pero": " ",
"begindatum": 1072915200000,
"OBJECTID": 4592,
"GISID": null
},
"geometry": {
"x": 4.4111299167955105,
"y": 51.19964676158513
}
},
{
"attributes": {
"id": "PUB039",
"thema": "publiek",
"type": "rechtbank",
"subtype": "rechtbank",
"naam": "Arbeidshof",
"straat": "COCKERILLKAAI",
"huisnummer": "39",
"postcode": "2000",
"district": "Antwerpen",
"lgst_niv": "stedelijk",
"hgst_niv": "stadsgewest",
"grondopp": 1252.4,
"gebo": "GEBO2000041274",
"pero": " ",
"begindatum": 1072915200000,
"OBJECTID": 4593,
"GISID": null
},
"geometry": {
"x": 4.388195205590128,
"y": 51.21008246323541
}
},
{
"attributes": {
"id": "PUB038",
"thema": "publiek",
"type": "rechtbank",
"subtype": "rechtbank",
"naam": "Hof van Beroep",
"straat": "WAALSEKAAI",
"huisnummer": " ",
"postcode": "2000",
"district": "Antwerpen",
"lgst_niv": "stedelijk",
"hgst_niv": "stadsgewest",
"grondopp": 931.84,
"gebo": "GEBO2000041389",
"pero": " ",
"begindatum": 1072915200000,
"OBJECTID": 4594,
"GISID": null
},
"geometry": {
"x": 4.388592822998534,
"y": 51.2098893773999
}
},
{
"attributes": {
"id": "PUB037",
"thema": "publiek",
"type": "rechtbank",
"subtype": "rechtbank",
"naam": "Vredegerecht 12e kanton",
"straat": "COGELSPLEIN",
"huisnummer": "46",
"postcode": "2100",
"district": "Deurne",
"lgst_niv": "stadsdeel",
"hgst_niv": "stedelijk",
"grondopp": 69.49,
"gebo": "GEBO2000101040",
"pero": " ",
"begindatum": 1072915200000,
"OBJECTID": 4595,
"GISID": null
},
"geometry": {
"x": 4.455939063598196,
"y": 51.220085026065256
}
},
{
"attributes": {
"id": "PUB036",
"thema": "publiek",
"type": "rechtbank",
"subtype": "rechtbank",
"naam": "Vredegerecht 11e kanton",
"straat": "HOF VAN DELFTLAAN",
"huisnummer": "46",
"postcode": "2180",
"district": "Ekeren",
"lgst_niv": "stadsdeel",
"hgst_niv": "stedelijk",
"grondopp": 137.49,
"gebo": "GEBO2000018361",
"pero": " ",
"begindatum": 1072915200000,
"OBJECTID": 4596,
"GISID": null
},
"geometry": {
"x": 4.450185490734397,
"y": 51.271352312900625
}
},
{
"attributes": {
"id": "PUB035",
"thema": "publiek",
"type": "rechtbank",
"subtype": "rechtbank",
"naam": "Vredegerecht 10e kanton",
"straat": "MAANTJESSTEENWEG",
"huisnummer": "133",
"postcode": "2170",
"district": "Merskem",
"lgst_niv": "stadsdeel",
"hgst_niv": "stedelijk",
"grondopp": 423.06,
"gebo": "GEBO2000021307",
"pero": " ",
"begindatum": 1072915200000,
"OBJECTID": 4597,
"GISID": null
},
"geometry": {
"x": 4.438463908971644,
"y": 51.2553040855115
}
},
{
"attributes": {
"id": "PUB034",
"thema": "publiek",
"type": "rechtbank",
"subtype": "rechtbank",
"naam": "Vredegerecht 9e kanton",
"straat": "TURNHOUTSEBAAN",
"huisnummer": "92",
"postcode": "2140",
"district": "Borgerhout",
"lgst_niv": "stadsdeel",
"hgst_niv": "stedelijk",
"grondopp": 408.47,
"gebo": "GEBO2000050822",
"pero": " ",
"begindatum": 1072915200000,
"OBJECTID": 4598,
"GISID": null
},
"geometry": {
"x": 4.431857640801616,
"y": 51.215433065646
}
},
{
"attributes": {
"id": "PUB033",
"thema": "publiek",
"type": "rechtbank",
"subtype": "rechtbank",
"naam": "Vredegerecht 8e kanton",
"straat": "GROTESTEENWEG",
"huisnummer": "13",
"postcode": "2600",
"district": "Berchem",
"lgst_niv": "stadsdeel",
"hgst_niv": "stedelijk",
"grondopp": 395.76,
"gebo": "GEBO2000064052",
"pero": " ",
"begindatum": 1072915200000,
"OBJECTID": 4599,
"GISID": null
},
"geometry": {
"x": 4.415794084271564,
"y": 51.19822642820842
}
},
{
"attributes": {
"id": "PUB032",
"thema": "publiek",
"type": "rechtbank",
"subtype": "rechtbank",
"naam": "Oud Gerechtshof - Rechtbank (in verbouwing)",
"straat": "JUSTITIESTRAAT",
"huisnummer": "38-40",
"postcode": "2018",
"district": "Antwerpen",
"lgst_niv": "stedelijk",
"hgst_niv": "stadsgewest",
"grondopp": 6097.37,
"gebo": "GEBO2000054773",
"pero": " ",
"begindatum": 1072915200000,
"OBJECTID": 4600,
"GISID": null
},
"geometry": {
"x": 4.4039257859977745,
"y": 51.208703040157566
}
}
]
}
Gebruik
We zouden zelf een Promise kunnen schrijven. Maar dat gaan we niet doen. We gebruiken een ingebouwde Promise. De methode fetch retourneert een Promise in JavaScript en wordt gebruikt om informatie op de server op te vragen en in de webpagina's te laden. Het verzoek kan naar elke API gestuurd worden die de gegevens met de indeling JSON of XML retourneert.
Bronnen
Dr. Axel Rauschmayer, JavaScript for impatient programmers, 2019
2021-03-26 10:28:47