\nA promise is used when making calls to a process that will take a while to execute. Instead of hanging the application and waiting for the call to return, a promise is used. The promise tells the calling function, this could take a while, I’ll send you back the result when it’s done.
\nThe calling function then continues on with the rest of the program.
\nWhen the long running call is done, the promise will send back the result to the caller. The caller then takes the result and does what it needs to with it.
\nExamples of calls to long running processes include rest api calls, file uploads and downloads, timeouts, or complex mathematical calculations.<\/p>\n
The following is an example of a function that calls a timeout and returns a promise. When the timeout is finished, the promise sends back the result. The result could be a successful response or an error.<\/p>\n
\nfunction examplePromise() {\n return new Promise((resolve, reject) => {\n setTimeout( function() {\n const anAnswer = \"All done\";\n resolve(anAnswer);\n }, 5000);\n });\n}\n<\/code><\/pre>\nThis example uses a timeout to return after waiting 5 seconds. When the timeout is done, the resolve function is used to send the response back to the calling function.
\nIf an error occurs, reject() would be used instead of resolve() to tell the caller something went wrong.<\/p>\n
This function would be called like this:<\/p>\n
\nexamplePromise()\n .then((response) => {\n console.log('Success: ' + response);\n }\n .catch((error) => {\n console.log('Something went wrong: ' + error);\n }\n .finally(() => {\n console.log('Always do something');\n }\n<\/code><\/pre>\n\nThe then function will execute when resolve is called when the long running process is done.
\nThe catch function will execute when reject is called from the long running process.
\nThe finally function is optional. If defined, it will always execute when the long running process is done. It doesn’t matter if resolve or reject was called. It will still execute.<\/p>\n
\nImplementation:<\/strong><\/br><\/br><\/p>\n\nFor this tutorial implementation, open up the Weather.js file and add the bolded lines below:<\/p>\n
\njs\/modules\/Weather.js:<\/p>\n
\n\nclass Weather {\n\n \/\/ Constructor\n constructor() {\n };\n\n getLocation() {\n\n return new Promise((resolve, reject) => {\n let url = 'https:\/\/ipinfo.io\/json';\n let options = {\n mode : 'cors'\n };\n setTimeout( function() {\n resolve({});\n }, 5000); \n }); \n<\/b> \n };\n\n getWeather(coordinates) {\n\n return new Promise((resolve, reject) => {\n let options = {\n url: 'https:\/\/api.openweathermap.org\/data\/2.5\/weather?lat=' + coordinates[0] +\n '&lon=' + coordinates[1] + '&appid=ENTER_YOUR_OPENWEATHERMAP_API_KEY_HERE',\n setRequestHeader: false,\n async: true\n };\n \n setTimeout( function() {\n resolve({});\n }, 5000); \n }); \n<\/b> \n } \n}\n\nexport default Weather;\n\n<\/code><\/pre>\n\nThese lines return a promise and will be resolved when a REST API is finished. The REST API implementation will be done in the next tutorial post.<\/p>\n
\nAlso edit the init function of js\/javascript_tutorials.js to include the highlighted lines:<\/p>\n
<\/p>\n
\n\n\/\/ JavaScript Tutorial\n\n\/*\n * This file will add JavaScript\n * to a website.\n *\/\nimport TemperatureConverter from \".\/modules\/TemperatureConverter.js\";\nimport Weather from \".\/modules\/Weather.js\";\n\n(function() {\n let doc = document;\n let defaultLocation = [-86.7816, 36.1627]; \/\/ longitude, latitude\n\n function setWeather(data) {\n if (data) {\n let temp = Math.round(data.main.temp);\n try {\n let fahrenheit = TemperatureConverter.convertCelsiusToFahrenheit(temp - 273);\n console.log(\"Fahrenheit temperature: \" + fahrenheit);\n } catch (error) {\n console.log(\"Error setting weather: \" + error.message);\n }\n }\n }\n\n function init() {\n\n let weather = new Weather();\n weather.getLocation()\n .then((location, error) => {\n let coordinates = defaultLocation;\n weather.getWeather(coordinates)\n .then((weatherData, error) => {\n\n });\n });\n<\/b>\n\n let locationStr = \"\";\n for (let i = 0, num = defaultLocation.length; i < num; i++) {\n locationStr += defaultLocation[i];\n if (i === 0) {\n locationStr += \", \";\n }\n }\n\n console.log(\"Setting weather for location: \" + locationStr);\n\n setWeather({ main: { temp: 30 } });\n }\n\n init();\n})();\n\n<\/code><\/pre>\n\nThese lines call the weather functions which return a promise. The next tutorial post will use the response returned from the promise.<\/p>\n
\nFor completeness, the other files in this tutorial are as follows:<\/p>\n
index.html:<\/p>\n
<\/p>\n
\n<html>\n <head>\n <link rel=\"stylesheet\" href=\"css\/style.css\"\/>\n <\/head>\n\n <body>\n <header>\n <nav>\n\n <\/nav>\n\n <article id=\"toolbar\">\n <article id=\"currentWeather\" class=\"text-center\">\n <section id=\"location\">\n <\/section>\n <section id=\"weatherTemperature\">\n <span id=\"temperatureValue\"><\/span>\n <span id=\"degreeSymbol\">°<\/span>\n <span id=\"temperatureUnits\"><\/span>\n <\/section>\n <section id=\"weatherDescription\">\n <\/section>\n <img id=\"weatherIcon\"> \n <\/img>\n <\/article> \n <\/article>\n\n <\/header>\n\n <main><\/main>\n\n <footer><\/footer>\n\n <script src=\"js\/javascript_tutorial.js\" type=\"module\"><\/script>\n <\/body>\n<\/html>\n<\/code>\n<\/pre>\njs\/modules\/TemperatureConverter.js:<\/p>\n
\n\nclass TemperatureConverter {\n \n static convertKelvinToCelsius(kelvin) {\n if (typeof kelvin !== 'number') {\n throw 'Kelvin value is not a number';\n }\n return Math.round(kelvin - 273);\n }\n \n static convertCelsiusToFahrenheit(celsius) {\n if (typeof celsius !== 'number') {\n throw 'Celsius value is not a number';\n }\n return Math.round((celsius * (9\/5)) + 32);\n };\n \n static convertFahrenheitToKelvin(fahrenheit) {\n if (typeof fahrenheit !== 'number') {\n throw 'Fahrenheit value is not a number';\n }\n return Math.round(((5\/\n\n\n\n\nexport default TemperatureConverter;\n\n<\/code><\/pre>\n\ncss\/style.css:<\/p>\n
<\/p>\n
\n\nheader nav {\n height: 10vh;\n border-bottom: 1px solid darkgray;\n}\n\nheader #toolbar {\n height: 5vh;\n border-bottom: 1px solid darkgray;\n}\n\nmain {\n height: 72vh;\n border-bottom: 1px solid darkgray;\n}\n\nfooter {\n height: 10vh;\n border-bottom: 1px solid darkgray;\n}\n\n<\/code><\/pre>\nYou should see the following in the browser console when loading the index.html file:<\/p>\n
Setting weather for location: -86.7816, 36.1627
\njavascript_tutorial.js:19 Fahrenheit temperature: -405<\/p>\n
\nNote, the files will need to be loaded onto a web server. If running them locally in Chrome, you may get a CORS error.<\/p>\n
\nThe JavaScript tutorial series starts with this post<\/a>.<\/p>\n\n(paid links)<\/br>
\nMore JavaScript<\/a><\/br><\/br><\/p>\n