JS fetch() and jQuery $.ajax returning different response

Question

Im somewhat new to this JS async/await functions and im wondering why does it seem to return a different data compared to the jQuery $.ajax() function.

Im developing in Python/Django environment and here is my view which is sending the JSON response

class GetUserToken(APIView):
    authentication_classes = [SessionAuthentication, BasicAuthentication]
    permission_classes = [IsAuthenticated]

    def get(self, request, format=None):
        refresh = RefreshToken.for_user(request.user)
        content = {
            'user': str(request.user),  # `django.contrib.auth.User` instance.
            'access': str(refresh.access_token),
            'refresh': str(refresh),
        }
        return Response(content)

Here is my JS for getting the data asynchronously. (I combined both just so I can log both output at the same time)

async function get_jwt_token(){
    const token = await fetch('/api/user/token/');
    return token;
}

$.ajax({
    url: '/api/user/token/',
    method: 'GET',
    success: function(data){
        console.log(data);
        get_jwt_token().then(function(result){
            console.log(result);
        }).catch((e) => console.log(e));
    },
    error: function(xhr, status, err){
        console.log(err);
    }
});

below is the output

Ajax call output:

{
"user": "admin",
"access": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjMwMDc0ODg5LCJqdGkiOiI5NDAzZjBmMjI0MDU0NzFhODYwYmE4ZGIzNWUwYmI5NyIsInVzZXJfaWQiOjF9.Ee86WDrbiV4Oj2-MyWc3vSIZ5ly2vgbbJflErv-6aN0",
"refresh": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTYzMDEzOTY4OSwianRpIjoiYzVjMjU4ZjM2YzZmNGIxY2FlOGRhODkyZWRhYmRjNDIiLCJ1c2VyX2lkIjoxfQ.sO3e4_6QoidFD5Z6edIrDJidFrKpqFvRt1jljsOL22Q"
}

Async/Await output:

{
  type: "basic",
  url: "http://localhost:8000/api/user/token/",
  redirected: false,
  status: 200,
  ok: true,
   …
}

See image below:

The question is not about converting jquery ajax to JS fetch(), it's about the difference in the response of both function. The selected answer precisely answered the question. For converting jquery ajax to JS fetch(), refer to How to convert Ajax to Fetch API in JavaScript?

Your examples don't do the same thing. The fetch() part would have to be get_jwt_token().then(response => response.json() /*or .text()*/).then(token => console.log(token)) — Andreas
– Andreas, Commented Aug 27, 2021 at 8:53
Your comparison of the fetch result is the equivalent of return $.ajax rather than the completed ajax result — fdomn-m
– fdomn-m, Commented Aug 27, 2021 at 8:55
I updated your title, and the related question can be found here. stackoverflow.com/q/46803768/14032355 — ikhvjs
– ikhvjs, Commented Aug 27, 2021 at 9:15
Does this answer your question? How to convert Ajax to Fetch API in JavaScript? — fdomn-m
– fdomn-m, Commented Aug 27, 2021 at 10:40

vaibhav Prakash · Accepted Answer · 2021-08-27 08:57:05Z

2

In your get_jwt_token() function you need to return token.json().

Explanation from https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fetch() does not directly return the JSON response body but instead returns a promise that resolves with a Response object.

The Response object, in turn, does not directly contain the actual JSON response body but is instead a representation of the entire HTTP response. So, to extract the JSON body content from the Response object, we use the json() method, which returns a second promise that resolves with the result of parsing the response body text as JSON.

answered Aug 27, 2021 at 8:57

vaibhav Prakash

1013 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS fetch() and jQuery $.ajax returning different response

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related