# Fetch

But it did happen and developers everywhere rejoiced.

The basic command for fetch works like this:

let url = 'http://www.example.com/getdata/';
//this is the endpoint URL that generates our  data.
fetch(url)
  .then(function(response) {
    //response is the response object
    //we extract the text, json, or blob from it
    return response.json();
  })
  .then(function(data) {
    //data is the json object coming from the previous then( ) function
    //build the HTML from the data object
    console.log(data);
  })
  .catch(function(err) {
    //err is the Error object
    //This catch method runs if there is an error anywhere in  the process.
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Here is a QUICK explanation of how fetch works.

Once you have your data, it will almost always have Arrays inside it. You can loop through those Arrays and update your page with that data.

And here is a longer explanation if you want more details.

# Headers and Request Objects

When you need to send data and other information along with your request, you will need to use the Headers and/or Request Objects.

Next week we will look deeper into the uploading of data and files with fetch.

# Placeholder Images with AJAX

Here is an example of fetching a bunch of sample images using fetch.

Back to Week main page