JavaScript

JavaScript TutorialDatatypes in JavaScriptEvaluating JavaScriptFunctional JavaScriptJavaScript .postMessage() and MessageEventJavaScript AJAXJavaScript Anti-patternsJavaScript Arithmetic (Math)JavaScript ArraysJavaScript Arrow FunctionsJavaScript Async functions (async/await)JavaScript Async IteratorsJavaScript Automatic Semicolon Insertion - ASIJavaScript Battery Status APIJavaScript Behavioral Design PatternsJavaScript Binary DataJavaScript Bitwise operatorsJavaScript Bitwise Operators - Real World Examples (snippets)JavaScript BOM (Browser Object Model)JavaScript Built-in ConstantsJavaScript CallbacksJavaScript ClassesJavaScript CommentsJavaScript Comparison OperationsJavaScript ConditionsJavaScript ConsoleJavaScript Constructor functionsJavaScript Context (this)JavaScript CookiesJavaScript Creational Design PatternsJavaScript Custom ElementsJavaScript Data attributesJavaScript Data ManipulationJavaScript DateJavaScript Date ComparisonJavaScript DebuggingJavaScript Declarations and AssignmentsJavaScript Destructuring assignmentJavaScript Detecting browserJavaScript EnumerationsJavaScript Error HandlingJavaScript Escape SequencesJavaScript EventsJavaScript execCommand and contenteditableJavaScript FetchJavaScript File API, Blobs and FileReadersJavaScript Fluent APIJavaScript FunctionsJavaScript GeneratorsJavaScript GeolocationJavaScript Global error handling in browsersJavaScript HistoryJavaScript How to make iterator usable inside async callback functionJavaScript IndexedDBJavaScript InheritanceJavaScript Intervals and TimeoutsJavaScript JSONJavaScript Linters - Ensuring code qualityJavaScript LocalizationJavaScript LoopsJavaScript MapJavaScript Memory efficiencyJavaScript Method ChainingJavaScript Modals - PromptsJavaScript Modularization TechniquesJavaScript ModulesJavaScript NamespacingJavaScript Navigator ObjectJavaScript Notifications APIJavaScript ObjectsJavaScript Performance TipsJavaScript PromisesJavaScript Prototypes, objectsJavaScript ProxyJavaScript Regular expressionsJavaScript requestAnimationFrameJavaScript Reserved KeywordsJavaScript Same Origin Policy & Cross-Origin CommunicationJavaScript ScopeJavaScript ScreenJavaScript Security issuesJavaScript Selection APIJavaScript Server-sent eventsJavaScript SetJavaScript Setters and GettersJavaScript Strict modeJavaScript StringsJavaScript SymbolsJavaScript Tail Call OptimizationJavaScript Template Literals



JavaScript Fetch

From WikiOD

Syntax[edit | edit source]

  • promise = fetch(url).then(function(response) {})
  • promise = fetch(url, options)
  • promise = fetch(request)

Parameters[edit | edit source]

Options Details
method The HTTP method to use for the request. ex: GET, POST, PUT, DELETE, HEAD. Defaults to GET.
headers A Headers object containing additional HTTP headers to include in the request.
body The request payload, can be a string or a FormData object. Defaults to undefined
cache The caching mode. default, reload, no-cache
referrer The referrer of the request.
mode cors, no-cors, same-origin. Defaults to no-cors.
credentials omit, same-origin, include. Defaults to omit.
redirect follow, error, manual. Defaults to follow.
integrity Associated integrity metadata. Defaults to empty string.

Remarks[edit | edit source]

The Fetch standard defines requests, responses, and the process that binds them: fetching.

Among other interfaces, the standard defines Request and Response Objects, designed to be used for all operations involving network requests.

A useful application of these interfaces is GlobalFetch, which can be used to load remote resources.

For browsers that do not yet support the Fetch standard, GitHub has a polyfill available. In addition, there is also a Node.js implementation that is useful for server/client consistency.

In the absence of cancelable Promises you can't abort the fetch request (github issue). But there is a proposal by the T39 in stage 1 for cancelable promises.

Getting JSON data[edit | edit source]

// get some data from stackoverflow
fetch("https://api.stackexchange.com/2.2/questions/featured?order=desc&sort=activity&site=stackoverflow")
  .then(resp => resp.json())
  .then(json => console.log(json))
  .catch(err => console.log(err));

Set Request Headers[edit | edit source]

fetch('/example.json', {
    headers: new Headers({
        'Accept': 'text/plain',
        'X-Your-Custom-Header': 'example value'
    })
});

POST Data[edit | edit source]

Posting form data

fetch(`/example/submit`, {
    method: 'POST',
    body: new FormData(document.getElementById('example-form'))
});

Posting JSON data

fetch(`/example/submit.json`, {
    method: 'POST',
    body: JSON.stringify({
        email: document.getElementById('example-email').value,
        comment: document.getElementById('example-comment').value
    })
});

GlobalFetch[edit | edit source]

The GlobalFetch interface exposes the fetch function, which can be used to request resources.

fetch('/path/to/resource.json')
    .then(response => {
        if (!response.ok()) {
            throw new Error("Request failed!");
        }

        return response.json();
    })
    .then(json => { 
        console.log(json);
    });

The resolved value is a Response Object. This Object contains the body of the response, as well as it's status and headers.

Send cookies[edit | edit source]

The fetch function does not send cookies by default. There are two possible ways to send cookies:

  1. Only send cookies if the URL is on the same origin as the calling script.
fetch('/login', {
    credentials: 'same-origin'
})
  • Always send cookies, even for cross-origin calls.
fetch('https://otherdomain.com/login', {
    credentials: 'include'
})

Using Fetch to Display Questions from the Stack Overflow API[edit | edit source]

const url =
      'http://api.stackexchange.com/2.2/questions?site=stackoverflow&tagged=javascript';

const questionList = document.createElement('ul');
document.body.appendChild(questionList);

const responseData = fetch(url).then(response => response.json());
responseData.then(({items, has_more, quota_max, quota_remaining}) => {
  for (const {title, score, owner, link, answer_count} of items) {
    const listItem = document.createElement('li');
    questionList.appendChild(listItem);
    const a = document.createElement('a');
    listItem.appendChild(a);
    a.href = link;
    a.textContent = `[${score}] ${title} (by ${owner.display_name || 'somebody'})`
  }
});

Credit:Stack_Overflow_Documentation