1. Browser will contact DNS to translate the URL to the IP address.
2. Browser will send request to server.
3. Browser will parse the response from server.
4. Browser will render the page based on the parsed response (HTML, CSS and JavaScript)
In reality, when launching our website (built by Vue.js), we need a server to host it.
In addition, instead storing data in pc memory (once you refresh the page, we lost data), we need send data via HTTP to backend server to store them in database. Later on, we can fetch it via HTTP again.
In order to focus on our Vue journey, we can utilize 'firebase' to quickly build a backend service. It is free and easy to setup.
REST API
Representational State Transfer
Structure:
1. Resource (URL)
2. Representation (text, HTML, or JSON)
3. State Transfer (GET, PUT, POST, DELETE)
How to send http request to backend?
There are some options you can used in your Vue project.
1. fetch
2. axios
Handling Errors
There are two types of error:
1. Client side error
2. Server side error
Client Side Error
Using fetch(), then you need to add .catch() to get the client side error (browser error)
Ex:
fetch(
'url',
)
.catch((error) => {
// Client Side Error
console.log(error);
});
Server Side Error
Refer to this:
Using fetch(), server side error will not be caught by .catch().
You need to throw a new Error with the condition '!response.ok' in .then()
Ex:
fetch(
'url',
)
.then((response) => {
if (!response.ok) {
// Server Side Error
// Raise an error to let .catch() to catch it
// Then we can handle the errors in one location
throw new Error('Something went wrong...');
}
})
.catch((error) => {
// 1. Client Side Error
// 2. Or Server Side Error raised by our JavaScript
console.log(error);
});
No comments:
Post a Comment