Skip to content

fetch.md

Latest commit

 

History

History
86 lines (69 loc) · 3.06 KB

fetch.md

File metadata and controls

86 lines (69 loc) · 3.06 KB
Raw

Fetch

🔑 Recommended reading: MDN Using the Fetch API

The ability to make HTTP requests from JavaScript is one of the main technologies that changed the web from static content pages (Web 1.0) to one of web applications (Web 2.0) that fully interact with the user. Microsoft introduced the first API for making HTTP requests from JavaScript with the XMLHttpRequest API.

Today, the fetch API is the preferred way to make HTTP requests. The fetch function is built into the browser's JavaScript runtime. This means you can call it from JavaScript code running in a browser.

The basic usage of fetch takes a URL and returns a promise. The promise then function takes a callback function that is asynchronously called when the requested URL content is obtained. If the returned content is of type application/json you can use the json function on the response object to convert it to a JavaScript object.

The following example makes a fetch request to get and display an inspirational quote. If the request method is unspecified, it defaults to GET.

fetch('https://quote.cs260.click')
  .then((response) => response.json())
  .then((jsonResponse) => {
    console.log(jsonResponse);
  });

Response

{
  author: 'Kyle Simpson',
  quote: "There's nothing more permanent than a temporary hack."
}

To do a POST request you populate the options parameter with the HTTP method and headers.

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'test title',
    body: 'test body',
    userId: 1,
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
  .then((response) => response.json())
  .then((jsonResponse) => {
    console.log(jsonResponse);
  });

☑ Assignment

{"id":"99869011-3a94-40f9-b48f-6e34c9127943", "title":"Modify Fetch Example", "type":"ai-web-page", "allowAiPrompt":false, "gradingCriteria":"Use another Service Call, not https://quote.cs260.click", "height":150 }
Replace the quotable service call with a different one. Here are some suggestions.
- **Random user** - https://randomuser.me/api/
- **Jokes** - https://api.chucknorris.io/jokes/random?category=dev
- **GitHub user** - https://api.github.com/users/octocat
- **Photos** - https://picsum.photos/id/0/info
- **Quote** - https://quote.cs260.click

~~~html
<body>

  <pre></pre>

  <script>
    const url = "https://quote.cs260.click";
    
    fetch(url)
      .then((x) => x.json())
      .then((response) => {
        document.querySelector("pre").textContent = JSON.stringify(
          response,
          null,
          "  "
        );
      })
      .catch((err) => {
        document.querySelector("pre").textContent = err.message;
      });
  </script>
</body>
~~~

Don't forget to update your GitHub startup repository notes.md with all of the things you learned and want to remember.