Introduction:
For web developers, understanding how to manipulate data is crucial. An important acronym for describing these operations is CRUD: Create, Read, Update, and Delete. These operations form the backbone of data management.
Fetch methods are an example of the means in which developers can use JavaScript to interact with APIs and databases with ease. In this blog I will be going into detail about some of the functionality of CRUD operations and explore the Fetch API.
Understanding the Basics of C.R.U.D. Operations
Create:
The first word in the CRUD acronym, Create, entails the adding new data to a data source. This can include a range of actions from submitting a form on an App to creating a user profile.
Read:
The second word in the CRUD acronym, Read, describes the process of retrieving data from a source. This could, for example, include fetching a user's profile information after logging in, or returning data from a search function.
Update:
The U in CRUD stands for Update. When you update data, you're modifying an existing data-point. You could be replacing data with entirely new data or even just modifying a specific piece of data. An example would be modifying your profile picture, or editing an embarrassing list of your favorite bands.
Delete:
The final word of the CRUD acronym is Delete. This operation, as its name implies, encompasses deleting data from a source. An example of Delete would be removing a regrettable post on a social media platform.
Understanding Fetch API
The Fetch API functions as a versatile (and powerful) tool in JavaScript for accomplishing your CRUD goals and interacting with API's. It is one of the first thing new developers learn after grasping the basics of JavaScript.
fetch() GET Method; Reading the Data:
The fetch() function will start a GET request to a specific URL (placed in the fetch parentheses 'fetch(urlHere)'), and return a "Promise" that turns into whatever server you are accessing's data into a response from the server. In turn, this response can be turned into a readable format, such as JSON.
fetch() POST Method; Creating the Data:
When you are writing or creating new data, you will be utilizing the fetch() POST method. When using the POST method, you have to supply the URL (same as with the GET method!), and an object that holds specifies the type of method ("POST" in this example), the headers, and the specific data you want to send to the server.
fetch() PUT or PATCH Method; Updating the Data:
To update data, you would utilize the fetch() PUT or PATCH methods. Like the POST method, you need to use the server URL and provide an object with the information you need to edit, along with how to that information.
fetch() DELETE; Deleting the Data:
To remove data from a dataset, you will utilize the fetch() DELETE method. It will send a request to the server to delete a particular set of data, and the server in turn will remove the specified bit.
In Conclusion:
Learning the ins and outs of CRUD operations and how to utilize fetch methods in order to achieve those CRUD operations will be imperative to your development as a developer. These tools and strategies will empower you to create cool and dynamic web applications that have a highly interactive user experience. Mastering how to utilize Create, Read, Update, and Delete using fetch methods GET, POST, PATCH, and DELETE will be a major step in your learning journey.
On a More Personal Note About My Experiences:
I chose to write about this particular subject in my first blog-post because I know i struggled with the concept of understanding how fetch() communicates with the server. While learning about it I was hoping to find a less technical explanation with visual aids, but I struggled to find anything that I found satisfactory in that regard.
I am really hoping that this post can provide that to another person out there in the world. I would also like to add that if anyone is struggling to understand coding concepts and functions: Don't give up!
Learning a new skill is incredibly difficult, but hopefully the task can be rewarding and push you to grow through the experience. I implore you to keep struggling (or if not if you are a savant), and whether you succeed or fail, know that in the end you have bettered yourself, one way or another.
Top comments (1)
Nice blog, Jason! I love the graphics - they're hilarious. I agree with not giving up! It will always come in time.