Categories
JavaScript Development

Get content from an API endpoint

XMLHttpRequest()

Until recently a request for data from an API endpoint would typically boil down to this:

let url = '/some/content.json',
	request = new XMLHttpRequest();

request.open('GET', url);
request.responseType = 'json';
request.send();

request.onload = function() {
	console.log(request.response);
}

request.onerror = function () {
	console.log("An error occurred.");
};

It’s not too much code and can handle most requests with little change, but it’s never been very easy for me to remember.


fetch()

Now we have fetch() though, which in my opinion has a much nicer syntax:

const url = '/some/content.json';

fetch(url, {
	'Method': 'GET',
	'Content-Type': 'text/json'
})
.then((response) => {
	return response.json();
})
.then((json) => {
	console.log(json);
})
.catch((error) => {
	console.log("An error occurred.");
});
Categories
JavaScript Development

Node Package Manager – Installing packages

The most common task at the beginning of a project is to install the necessary packages – to do this you’ll use the install command a few times:

npm install react --save

To save a few keystrokes, this can be shorted to:

npm i react -S

npm i react-dom -S

--save or -S install the package to the current project – the packages will show up in the package.json under dependencies with a version number, usually the latest:

  "dependencies": {
    "react": "^16.12.0"
  }

Development dependencies

Not all dependencies need to be in the finished project, stuff like dev tools. To install a package only used during the development phase you can swap to --save-dev or -D:

npm i babel-core -D

This will install development dependencies under devDependencies in the package.json:

  "devDependencies": {
    "babel-core": "^6.26.3"
  }

Multiple packages in one install

If you are installing multiple packages at the same time, you can combine your installs into one line:

npm i babel-core babel-loader babel-preset-react -D

It doesn’t really matter if something has already been installed:

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.6",
    "babel-preset-react": "^6.24.1"
  }

If you wanna get really hardcore with your installs, you can use the following syntax to combine common package names:

npm i babel-{core,loader} babel-preset-react -D

This hurts my head though.


Specific versions

If your project has very specific requirements for what packages are used, you can also load specific versions via NPM:

npm install lodash@4.1.8

Or the latest version in a major version:

npm install lodash@^4.0.0


What happens in the background?

Loading just 5 packages seems easy when you look at it like this, but if you check your projects node_modules folder you’ll see alot happened in the background:

Installing packages in NPM installs all the dependencies for every package.

Every package you install also brings with it all of its dependencies – this can add up quickly on a big project. Our 5 packages has installed 83 packages into our node_modules folder.

Not something you’d want to manage manually…