So now we're able to save and fetch todos,
of course, the edit and delete capabilities are missing,
at least the capabilities to send those requests.
And I wanna continue with editing.
For this, in todos.js, we have this updateTodo function
and in there in the end,
we have this code for sending our request.
And again, I wanna copy all that request code from todos.js
and then go to app.js and use it there.
Now there, I wanna use it in methods,
so I'll unfold that,
and there in saveToDo,
this time in this first branch of this if statement,
which is our updating branch.
There, we still get that todoId, which we'll need,
but then before we update any data in our todos array,
I wanna send this request.
And therefore, of course,
saveTodo needs to be an async method since we use await,
but it already was async
because of the code we added before for storing todos.
So now here again, I sent this patch request.
And in there, I sent the newTodoText,
which of course now is wrong.
This should be the enteredTodoText from our data like this,
just as we did it for saving a new to do.
It's a patch request.
The todoId here is part of the path of the URL.
Then we have this basic error handling here.
And then of course, I still wanna update my to do's.
This code doesn't change.
And with that, I mean the todos in my todos array.
And the updating logic also doesn't need to change
because the idea hasn't changed
and the text is still the entered text.
So therefore, this should be all that has to be added.
And with that, if we save this,
we can load this and still execute this as before.
But now if I reload the page,
you see the updated data stays there.
So also if I add updated here to make this very clear
which todo changed, it's updated instantly on the DOM.
But if I reload, we fetch it again from the database
and we therefore see it really was changed there
because we still see this change in the newly fetched data.
So updating really isn't too difficult
and the same is true for deleting data.
So there we can go to deleteTodo in todos.js
and then grab this code for sending this request like that.
And then in app.js, we can go to this deleteTodo method,
which we have here, and keep this code for updating the DOM,
but also add this code for sending a request.
And actually, we can move that code
after the code where we update our data
because I'm fine with updating the data in the DOM
even before the request was sent
because this will ensure that the UI is updated instantly
and we then send the request to the API
kind of behind the scenes
because we don't need to wait for the response
of this request to update the UI.
We can immediately delete the todo there
and then just send the request thereafter.
Since I'm using await, we still need to add async here.
And then again, we need the todoId,
which we get here as a parameter value, so we have that.
And it's then this delete request.
And well, then I have this error handling here,
but I update the UI first.
And we could have done the same
for updating a todo by the way.
There, we could have also taken this code
for updating the UI even before we send our request.
This code, I mean.
We could grab all of that here
and move that in front of our request code like this
and it would still work.
Now we just send this please update this request
to the API behind the scenes
after the DOM was already updated,
and this will provide an even quicker feedback to our users.
So now if I update, this still works.
And if I reload,
we still get that updated data from the database,
so the request was sent correctly,
but we update immediately.
And the same is true for deleting.
I deleted from the UI immediately.
And if I reload, it stays deleted
because I did successfully send that deletion request
behind the scenes.
And I also have no errors here in the console.
So that all works.
And that is how we can send HTTP requests
from inside our Vue.js application or code.
Of course, because of all that request code,
the code in this file in app.js grew quite a bit,
but still, even though it's now more code,
it's really maintainable code,
and we still don't have to take care
about the nitty-gritty details of keeping the DOM updated,
which can be very error-prone
the more complex your UI and logic gets.
And of course, you could also add more JavaScript files
and outsource certain features into our files.
That is something you could do.
And that, of course, would allow you to split your code
so that it stays more maintainable.
Now that is absolutely something I also dive in
in my Vue.js course
or in my deep dive JavaScript the complete guide course
where you learn way more
and everything you need to know about JavaScript,
but for this introduction to Vue.js
and for giving you all that key web development knowledge,
this approach here is absolutely fine.
And you're now able to not just build user interfaces
with just HTML, CSS, and JavaScript,
but you can also build more powerful user interfaces
with a lot of interactivity in them
with help of JavaScript frameworks like Vue.js.