# Fetch

`fetch` is a built-in Javascript function that allows us to make API requests using Javascript.

The basic syntax for `fetch` is as follows:

```javascript
fetch(requestURL)
    .then(function(responseData){
        // Fetch will package the response into an object with some methods that allow us to do some useful things with the response.
        // Use the .json() method to return the data in JSON format
            return responseData.json();
    })
    .then(function(jsonData){
        // whatever we return in the first .then promise will be passed into this callback function
        // do some stuff with the jsonData here
    })
    .catch(function(error){
        // any errors encountered in the request or the .then promises above will be passed into this callback
        console.log("Oh no, there's been an error!", error);
    })
```

## Example

In this example, we'll display a list of random people using fetch and the [Random User API](https://randomuser.me/)

**index.html**

```markup
<h1>People</h1>
<ul id="people"></ul>
```

### First let's look at our data in the console

**script.js**

```javascript
fetch(requestUrl)
    .then(function(responseData){
        return responseData.json();
    })
    .then(function(jsonData){
        // the above .then passed our returned data into this callback
        console.log(jsonData);
        // now we can see that the data we want is nested under an inner 'results'
        console.log(jsonData.results)
    })
    .catch(function(error){
        // If any error is sent back, you will have access to it here.
        console.log("error!!!:", error);
    });
```

### Now let's get some of this data rendering on the page!

**script.js**

```javascript
document.addEventListener("DOMContentLoaded", function(){

    const ul = document.getElementById("people");
    const requestUrl = "https://randomuser.me/api/?results=10";

    function addPerson(person) {
        let li = document.createElement("li");
        li.textContent = person.name.first, person.name.last;
        ul.appendChild(li);
    }

    fetch(requestUrl)
        .then(function(responseData){
            // Fetch will package the response into an object with some methods that allow us to do some useful things with the response.
            // Use the .json method to return the data in JSON format
            return responseData.json();
        })
        .then(function(jsonData){
            // the above .then passed our returned data into this callback
            console.log(jsonData);
            // now we can see that the data we want is nested under an inner 'results'
            console.log(jsonData.results)
            // store this array of objects in a 'people' variable
            let people = jsonData.results;
            people.forEach(addPerson);
        })
        .catch(function(error){
            // If any error is sent bac, you will have access to it here.
            console.log("error!!!:", error);
        });
});
```

### Exercise

Add to the above code so that we see a photo along with the random user.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://romebell.gitbook.io/sei-412/00readme/fetch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.