Power of the URL

The wonderful world of HTTP allows us to use GET, POST, PUT, and DELETE. The majority of the time we're getting or posting. What I decided to do is separate this into two categories, GET and CHANGE. The CHANGE category is composed of POST, PUT, and DELETE which all have to do with making changes. This will also be useful when developing the methods within the API, however, we'll just focus on the URL for now.

Lets take a look at how we're structuring our URL and why.


// After API, the forward slashes separate each call you need to make.
// This will return two results.
"/api/{Method One Call}/{Method Two Call}/"

// Here we are making three calls, however, we're combining two call for one result.
// The "," allows us to know that method one's result will be carried into method two.
// We are still returning just two results.
"/api/{Method One Call},{Method Two Call}/{Method Three Call}/"

// An example of what the URL may actually look like.
"/api/users.get,users.changePass/users.friends/"

In the above example, you see that we're doing one literal call but in reality are actually making three calls in one. This allows us to simplify the process and the amount of calls we make. We are also giving the front-end complete control of the building blocks and how they may need the information. 

As you can see, the URL easily reveals the model being used here, the same way BEM reveals blocks and elements using the double underscore in ".block__element". Giving the next developer clear insight on what is being done here.

The Call

You must be curious on how are we sending multiple calls and receiving multiple results via one ajax call. Well, this goes back to what I've mentioned before about having principles or rules to make this work. Since we have to supply data for the different calls, POST seems the obvious choice being that using GET would add more data to the URL, which we kind of don't want. PUT could also work if we were doing one call, but the idea is using multiple calls so we need something that is not idempotent. POST is the answer.


// The payload contains an array of the data you want to pass for the methods you're calling.
// Each array item should be the type of parameters the method expects.
// In this case, we're passing a string for method one, string for method two, and integer for method three.
let payload = ['johndoe','eavVESLkSegmaslee2eaga42',15];

// In some cases for multiple params that need to be passed, you can use a object or array instead.
// That may look like the following:
let payload = ['johndoe',{param1:'foo',param2:'eavVESLkSegmaslee2eaga42'},15];

fetch("/api/users.get,users.changePass/users.friends/",{
	method: 'POST',
	headers: {
		'api-key': 'SomeUniqueKey',
	},
	body: JSON.stringify(payload)
}).then((response) => {
	return response.json();
}).then((data) => {
	// Data is the json that is returned.
	console.log(data[0]); // This will show the results of /users.get,users.changePass/
	console.log(data[1]); // This will show the results of /users.friends/
});

The above example shows how you would use the URL within an API call. Now we'll get into the method structure on how this will be handled.