\nHTTP requests are used to communicate between a client and a server. Example, a web application running in the browser communicates with a weather API running on someone else’s server using a GET HTTP request. The response data is then used to populate a widget in the web application.
\nIn JavaScript, the fetch API is used to perform HTTP requests.<\/p>\n
A basic example to retrieve data is shown below:<\/p>\n
\nconst config = {\n method = 'GET',\n headers: {\n 'Content-Type': 'application\/json'\n }\n}\nfetch('http:\/\/server.com\/url', config)\n .then(response => {\n if (!response.ok) {\n console.log('Error: ' + response.status);\n }\n return response.json();\n })\n .then(data => {\n console.log(data);\n })\n .catch((error) => {\n console.error('Error:', error);\n });\n<\/code><\/pre>\nA basic example to send data is shown below:<\/p>\n
\nconst config = {\n method = 'POST',\n headers: {\n 'Content-Type': 'application\/json'\n },\n body: JSON.stringify(somedata)\n}\nfetch('http:\/\/server.com\/url', config)\n .then(response => {\n if (!response.ok) {\n console.log('Error: ' + response.status);\n }\n return response.json();\n })\n .then(data => {\n console.log(data);\n })\n .catch((error) => {\n console.error('Error:', error);\n });\n<\/code><\/pre>\nFetch will return successfully unless there is a network error. HTTP error codes do not cause the fetch to reject. HTTP error codes need to be explicitly checked for.<\/p>\n
Since fetch communicates with an external server, the call could turn into a long running process. Fetch should be called using promises, as discussed in the previous tutorial post<\/a>, or from an asynchronous function. Using the fetch API is demonstrated in the implementation below.<\/p>\n\nImplementation:<\/strong><\/br><\/br><\/p>\nFor this tutorial implementation, open up the Weather.js file and add the bolded lines below:
\nNOTE: The example calls the openweathermap API. This API requires a key which can be obtained by creating a free account at https:\/\/openweathermap.org\/<\/a><\/p>\n\njs\/modules\/Weather.js:<\/p>\n
\n\nclass Weather {\n\n \/\/ Constructor\n constructor() {\n };\n\n getLocation() {\n return new Promise((resolve, reject) => {\n\n const url = \"https:\/\/ipinfo.io\/json\";\n\n fetch(url)\n .then(response => {\n return response.json();\n })\n .then(result => {\n if (result) {\n let location = {\n city: result.city,\n region: result.region,\n loc: result.loc\n };\n\n resolve(location);\n } else {\n resolve(null);\n }\n });\n<\/b>\n }); \n };\n\n getWeather(coordinates) {\n return new Promise((resolve, reject) => {\n \n const url = 'https:\/\/api.openweathermap.org\/data\/2.5\/weather?lat=' + coordinates[0] +\n '&lon=' + coordinates[1] + '&appid=ENTER_YOUR_OPENWEATHERMAP_API_KEY_HERE';\n let config = {\n setRequestHeader: false,\n async: true\n };\n \n fetch(url, config)\n .then(response => {\n return response.json();\n })\n .then(result => {\n if (result) {\n resolve(result);\n } else {\n resolve(null);\n }\n });\n<\/b>\n }); \n } \n}\n\nexport default Weather;\n\n<\/code><\/pre>\nThese lines call the REST API defined in the url variable. A promise is returned to the calling function. When the api call returns the promise resolves and sends back the data received from the REST API.<\/p>\n
\nNext, edit the js\/javascript_tutorials.js as follows: <\/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 setLocation(location) {\n if (location) {\n let locationElement = doc.getElementById(\"location\");\n locationElement.innerHTML = location.city + \", \" + location.region;\n }\n }\n\n function setWeather(data) {\n if (data) {\n let temp = Math.round(data.main.temp);\n try {\n let fahrenheit = TemperatureConverter.convertCelsiusToFahrenheit(\n temp - 273\n );\n console.log(\"Fahrenheit temperature: \" + fahrenheit);\n let temperatureValueElement = document.getElementById(\n \"temperatureValue\"\n );\n temperatureValueElement.innerHTML = fahrenheit;\n let temperatureUnitsElement = document.getElementById(\n \"temperatureUnits\"\n );\n temperatureUnitsElement.innerHTML = \"F\";\n\n let weather = data.weather[0];\n let main = weather.main;\n let weatherDescriptionElement = document.getElementById(\n \"weatherDescription\"\n );\n weatherDescriptionElement.innerHTML = main;\n\n let icon = weather.icon;\n let weatherIconElement = document.getElementById(\"weatherIcon\");\n weatherIconElement.src =\n \"https:\/\/openweathermap.org\/img\/w\/\" + icon + \".png\";\n } catch (error) {\n console.log(\"Error setting weather: \" + error.message);\n }\n }\n }\n\n function init() {\n let weather = new Weather();\n weather.getLocation().then((location, error) => {\n \/\/ let coordinates = defaultLocation;\n if (location) {\n setLocation(location);\n\n let coordinates = location.loc.split(\",\");\n weather.getWeather(coordinates).then((weatherData, error) => {\n if (weatherData) {\n console.log(typeof weatherData);\n setWeather(weatherData);\n }\n });\n }\n });\n<\/b>\n init();\n})();\n\n<\/code><\/pre>\n\nThese changes will retrieve the DOM elements that will display the location and weather data. The data received from the REST API calls will then be used to populate the DOM elements for viewing in the browser.<\/p>\n
\nFor completeness, the other files in this tutorial example 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>\nSee a working example at https:\/\/www.zofxare.com\/zofxare\/blog\/tutorials\/javascript\/index.html<\/a>.<\/p>\nWhen loading the index.html file in a browser, you should see the city and state of your IP address. You should also see the current temperature and weather info at that location.<\/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(#sponsored)<\/br>
\nMore JavaScript<\/a><\/br><\/br><\/p>\n