> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-151-api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-151-api/03-api-fundamentals/3-fetch/fetch-intro.md).

# Fetch Intro

## What is Fetch?

Fetch in programming means pretty much the same as playing fetch with your dog. The **Fetch API** allows us to **"fetch"** or pull resources from across the web: text files, code, data, and more.

Fetch centers around one concept for the most part: a generic definition of objects known as `Request` and `Response`. Because these objects are generic, they can be used anywhere you need them.

Let's first go through the basic model of a fetch 1. The `fetch()` method takes in your desired resource's path as a **mandatory** argument. 2. The `Request` object returns a `Promise` that resolves to the argument's `Response`. 3. After retrieving a `Response`, a multitude of methods define the `body` content and how it will be handled. 4. Please note that you can use the `Request()` and `Response()` constructors to directly create requests and responses, but they are more likely to be created by other API actions.

## Basic Fetch Components

* `GlobalFetch` - contains the `fetch()` used to fetch a resource.
* `Headers` -  HTTP response/request headers can be queried and allow you to do things such as retrieving, updating, or deleting.
* `Request` - a resource request. It contains the method of the request (GET, POST, etc.), the url, associated headers, and more.
* `Response` - the response to the request. It contains the headers and url, but more importantly replies with the status code to determine whether or not the request was successful.
* `Body` - contains methods relating to the main content of the response/request that allow you to specify content type and how to handle it.

We'll go through an in-depth example or two later, but here's a basic example of a fetch request.

```javascript
fetch('http://example.com/movies.json')
    .then(function(response) {
        return response.json();
    })
    .then(function(myJson) {
        console.log(myJson)
    })
```

Let's talk about what fetch components this has:

* `http://example.com/movies.json` is the `argument`, the path of our desired resource.
* The `response` object, which will return some JSON.
* However, this is only an HTTP response. The `json()` method is required to extract the JSON.

## Benefits of Fetch

* In general, Fetch is **simpler** than the previous standard of XHR (XMLHttpRequest).
* Fetch is **promise-based**, which allows us to write cleaner code.
* Fetch has a **"neat"** definition for requests/responses. You can write a function to **modify** a request before it is sent.
* Not necessarily a benefit, but Fetch doesn't send cookies. Authentication must be handled manually.

## Http-Server

In order to access some APIs without deploying an application, you can create a virtual server on your machine to accept the returned data using an npm package called `http-server`. Run the following command in your terminal window: \
 **WINDOWS** \
 `npm install -g http-server` \
 **MAC**\
 `sudo npm install -g http-server` (The `sudo` command is sometimes, but not always, necessary to install npm packages globally. It requires administrator privileges for whatever console command follows it. It can lead to some very bad unintended consequences, however, so always try to install **WITHOUT** the `sudo` command first.) \
 This will install the package globally so its accessible from any location. Once it's installed, just type `http-server` into your terminal. You should see something like the following appear: \
 

![http-server](https://1620231560-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfgKP1KuFeflpHx%2F-LAU8dS__8JJXCH5iOwB%2F-LAU8wa6mgiO4lquANgK%2Fhttp-server.png?generation=1524162351109353\&alt=media)

\
 Go to `localhost:8080` and the app you're running should appear. If for some reason you get an error message saying that port 8080 is in use (or something along those lines), just add `-p` to specify a port number. A port number can be just about anything, but some of the more commonly used ones are 80, 3000, 4000, and 8080.