Flash cards
Review the key moves
What is the main idea behind JavaScript Fetch API?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___(file) .then(x => x.text()) .then(y => myDisplay(y));Put the learning moves in the order that makes the concept easiest to apply.
The Fetch API interface allows web browser to make HTTP requests to web servers.
😀 No need for XMLHttpRequest anymore.
Browser Support
fetch() is an ES6 feature .
ES6 is fully supported in all modern browsers since June 2017:
| Chrome 51 | Edge 15 | Firefox 54 | Safari 10 | Opera 38 |
|---|---|---|---|---|
| May 2016 | Apr 2017 | Jun 2017 | Sep 2016 | Jun 2016 |
A Fetch API Example
The example below fetches a file and displays the content:
fetch(file) .then(x => x.text()) .then(y => myDisplay(y));Since Fetch is based on async and await, the example above might be easier to understand like this:
Example
async function getText(file) {
let x = await fetch(file);
let y = await x.text();
myDisplay(y);
}Or even better: Use understandable names instead of x and y:
Example
async function getText(file) {
let myObject = await fetch(file);
let myText = await myObject.text();
myDisplay(myText);
}