Why is it necessary to use 'then' on the response JSON when using the Fetch API? It's like trying to decipher the hidden meaning

While delving into the realm of promises, I decided to test it out with a basic GET request on Twitch. Yet, one aspect is still puzzling me - why does json() return a promise? The response already contains the data, so what's the deal with it being wrapped in another promise?

fetch('https://api.twitch.tv/kraken/games/top?limit=10&offset=0')
    .then( resp => {
        resp.json()
            .then(function(data) {  
                        console.log(data);  
        });
  });

To put it differently: I grasp that the first then statement waits for the response. However, once inside the function of that then block, shouldn't the data be readily accessible without an additional promise since the response has already been received? This whole situation just leaves me scratching my head.

Answer №1

According to information found in the source:

When a fetch() request is made, the response received is in the form of a Stream object. This indicates that when we utilize the json() method, a Promise will be generated due to the fact that the stream's reading process occurs asynchronously.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing spine.js in conjunction with haml

Recently, I've been experimenting with spine.js and delving into its view documentation. In particular, the example using eco as the templating engine left me feeling less than impressed. Personally, I much prefer working with haml for my templating n ...

Is there a replacement for findIndex in Internet Explorer?

I am currently working on a code snippet for smooth navigation scroll to different sections. var lastId; var topMenu = $(".community-nav"); var topMenuHeight = topMenu.outerHeight() - 19; if(window.matchMedia("(max-width: 768px)").matches) ...

Caution: Highlighting Non-ASCII Characters in Your Django Form

Looking to implement client-side Ajax validation for my Django form. The goal is to alert users in real-time if any non-ascii characters are detected as they type in a field. Originally considered using python to check for ascii characters in the form&apo ...

The $.parseJSON function accurately retrieves valid items but also presents an endless stream of undefined

Currently, I am in the process of developing a Flask application that fetches teams from a football league. The teams_list method returns the result of an AJAX request. While the output is correct, it seems to trigger an infinite loop that significantly sl ...

Traversing Through a Complicated JSON Structure

An application I developed can accept faxes in XML format and convert them into JSON objects to extract the necessary information, specifically the base64 string within the "file contents" variable of the document. Here is the code snippet: exports.recei ...

Steps for accessing the files uploaded in a React application

Looking to implement an upload button using material UI that allows users to upload multiple files, with the goal of saving their paths into an array for future use. However, I'm unsure about where these uploaded files are stored. The code snippet be ...

Retrieving the content of input elements within a div post removal

I have a situation where I need to dynamically add input text fields inside a div and then delete the div while retaining the values of the input field in a variable. Here's an example code snippet that demonstrates this: $(document).ready(funct ...

when the submit button is clicked, verify whether the input field is empty

I have exhausted all my options and nothing seems to work. All I want is for the following functionality to be implemented: When a submit button is clicked -> check if a text field is empty -> if it is, display an error alert and prevent advancing t ...

A step-by-step guide on duplicating the functionality of the jQuery

Issue at Hand: I'm attempting to recreate the functionality of jQuery's ajax method as I find myself utilizing XMLHttpRequest multiple times within a script. However, I am hesitant to include jQuery as a dependency since I only require a few meth ...

Activate the SHIFT key

In the input field for user's firstname, I have restricted all keys to a-z and 0-9 only. This restriction is working well, but I also want to allow the SHIFT key so that users can capitalize letters if needed. Despite trying various solutions, I have ...

Modify data source with AngularJS when clicking a button

I have a webpage with a controller called 'listCtrl' that fetches data from "http://data.com/?region=north". app.controller('listCtrl', function ($scope, $http) { $http.get("http://data.com/?region=north").success(function (data) { ...

Concern with Isotope's masonry feature

I'm at my wit's end! The container div I'm dealing with is 1170px wide. My goal is to fit in 3 divs within this width. The first div is 275px wide, the second is 580px wide, and the third is also 275px wide. Altogether, these divs should ad ...

Exploring the usage of arrays within Angular 4 components. Identifying and addressing overlooked input

I'm struggling with array declaration and string interpolation in Angular 4 using TypeScript. When I define the following classes: export class MyArrayProperty { property1: string; property2: string; } export class MyComponent { @Input() object: ...

Error encountered with nested v-for in Vue.JS causing null and undefined values to be thrown

Question Conclusion: A Vue component I am working on has the following data setup: conversations: null, currentConversation: null, There is a method that runs on mounted() to retrieve the user's conversations: /** * Method to retrieve the user&ap ...

What is the proper way to retrieve dates in JSON with the specified format?

When visiting a profile on SO and checking the 'days visited' section, you'll notice a jQuery datepicker showing the days in green that have been visited. I'm working on a similar feature and dissected SO's implementation to unders ...

Is there a way to maintain scroll position on a dynamically refreshing div?

After searching for hours, I still can't find a solution to my problem. I am using a simple JQuery script to refresh a div and display my PHP output in it. $script = " <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery ...

Sorting two different divisions is an example

I need advice on how to toggle between two divs, A and B, without having to reload the page. Ideally, I would like to have three buttons - one that shows only div A when clicked, another that displays only div B, and a third button that shows both A and ...

I created some jQuery code that modifies a button when it is hovered over, however, I ended up writing the code individually for each button. What steps can I take to turn it

Is there a way to turn the code for each button on my website into a jQuery function that can be applied to any button? This is how the code currently appears: $(document).ready(function() { $("#linkXML").hover( function() { ...

How can I use AJAX to read an image file and display it on a Canvas?

Is there a way to read an image from my server using Ajax and then display it on Canvas? I am aware that this can be achieved by using normal image tags and canvas draw methods, as shown below: <img id="myImage" src="./ColorTable.PNG" style="display:n ...

Is there a way to retrieve the central anchor point position (x, y) of the user's selection in relation to the document or window?

Is there a way to retrieve the center anchor point position (x, y) of the user's selection relative to the document or window? I have tried using window.getSelection() to get selected nodes, but I am unsure how to obtain their position: See an examp ...