This week concludes the fifth week of my internship at 9cv9 as part of the NUS Overseas College (NOC) Southeast Asia programme. For this week’s reflection, I would like to talk about how urbanCV handles the API calls it needs to make to the backend to retrieve data to render on the website.
Usually, the frontend communicates with the backend through the HTTP protocol. This is typically done through Asynchronous JavaScript And XML (AJAX) requests. A quick introduction of AJAX: It uses a combination of a browser built-in XMLHttpRequest object (to request data from a web server) and JavaScript and HTML DOM (to display or use the data). With AJAX, webpages are able to be partially updated asynchronously without having to reload the whole page.
AJAX requests can be done through the fetch function or more popular 3rd party libraries like AXIOS. The advantage of the fetch function is that it is a singular (more basic and lower level) function that is built into almost all modern browsers, which allows your app to use less 3rd party packages which will result in a smaller application size. However the downside of course is that a lot of code has to be written that would have already been done for you in the 3rd party libraries. I think a more in-depth comparison between Fetch and Axios is explained really well here in the following stackoverflow post.
AXIOS is currently the most popular 3rd party library (based on npm’s weekly download statistics) out there for making AJAX requests. It can be very easily added into the Next.js project through NPM. Below are 2 methods you can get data from axios:
1) Promise based syntax
- .then() gets called when request is completed
- Whenever we make a request with axios it returns an object called a promise.
- A promise is an object that will essentially give us a little notification when some amount of work, like a network request is completed.
- Chain on a .then() function after axios.get() (usually an arrow function)
axios.get(‘url’, { params: { query: term }, headers: {Authorization: ‘key’} })
.then(response => {
console.log(response.data.results);
});
2) async await syntax
- Mark onSearchSubmit function with ‘async’ keyword
- allows us to use the async await syntax inside this function
- add await keyword in front of whatever is taking some time to resolve
async onSearchSubmit(term) {
const response = await axios.get(…)
}
You can also choose to create an instance of the axios client with a couple of defaulted properties, such as where it is going to make the request, or headers and params. An example of such an axios client with Auth headers would be:
export default axios.create({
baseURL: ‘https://api.unsplash.com’,
headers: {
Authorization:
‘Client-ID aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1kUXc0dzlXZ1hjUQ==’
}
})
UrbanCV uses a different 3rd party library, called apisauce, which is a low-fat wrapper for the axios http client library. It is built with Axios as a base, with added flavours of customized standard error formats and request/response transformers. It is the easiest form of Axios which provides standardized error handling, and can work on both the client and server, just like Fetch. For more information about how to use it, check out the official documentation here.
References:
Image and AJAX definitions from: https://www.w3schools.com/xml/ajax_intro.asp
A screenshot of the stackoverflow post mentioned (in case the post ever gets deleted etc)
