This content originally appeared on DEV Community and was authored by Yaku
Hi welcome to part 2 of the comprehensive guide to Svelte.
In this article, we will be learning how to fetch API data using Svelte. We will be using the GitHub API to fetch data about repositories.
First, we need to install the Svelte npm package.
$ npm install svelte
Next, we need to create a file called app.svelte.
`
GitHub Repository Dataconst url = "https://api.github.com/repositories";
const request = new XMLHttpRequest();
request.open("GET", url, true);
request.onload = function() {
if (request.status === 200) {
const resp = request.response;
const data = resp.body.data;
console.log(data);
}
};
request.onerror = function() {
console.error("request failed: " + request.status);
};
request.send();
`
In the code, we first define the URL for the GitHub API. We then create a new XMLHttpRequest object. We open the GET request and set the URL. We also set the true parameter, which ensures that the request is made asynchronously.
We then define two functions, onload and onerror . onload will be executed when the request is loaded, while onerror will be executed if there is an error. We then send the request.
If the request is successful, we will get the response body. We will then extract the data from the body and log it to the console.
You can try running the code in your browser. You should see the data for all the repositories on GitHub.
Thanks for reading ☺️
Please follow me on git here GitHub.com/yakumwamba
This content originally appeared on DEV Community and was authored by Yaku
Yaku | Sciencx (2022-01-25T01:13:39+00:00) Svelte: A Comprehensive Guide to Developing Your App With Svelte – Part 2 🦜. Retrieved from https://www.scien.cx/2022/01/25/svelte-a-comprehensive-guide-to-developing-your-app-with-svelte-part-2-%f0%9f%a6%9c/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.