Using the Fetch Api with Django Rest Framework

info.md

Using the Fetch Api with Django Rest Framework

Server

First, make sure you use the SessionAuthentication in Django. Put this in your settings.py

# Django rest framework
REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.SessionAuthentication'
    ]
}

Client

Then start with including the getCookie method from the Django Docs.

Finally use the fetch method to call your endpoint.

var myData = {
    hello: 1
};

fetch("/api/v1/endpoint/5/", {
    method: "put",
    credentials: "same-origin",
    headers: {
        "X-CSRFToken": getCookie("csrftoken"),
        "Accept": "application/json",
        "Content-Type": "application/json"
    },
    body: JSON.stringify(myData)
}).then(function(response) {
    return response.json();
}).then(function(data) {
    console.log("Data is ok", data);
}).catch(function(ex) {
    console.log("parsing failed", ex);
});

Easy! (Remember this will currently only work on Chrome and Firefox)

Thanks, it helped me!

Thanks! Super helpful!

You are a god amongst mortals. Thank you for this.

hi, can't I use get or post?
and must I use DRF?

@budescode This is a DRF example, but using fetch against regular Django is also possible, just not with this example code :)

Doing GET requests does not require anything special, doing POST does require a CSRF token and you'll need to pass it to your endpoint.

To send data using the GET method you must construct the URL. The function below receives a URL and the data to be sent:

function montaURL(url,data) {
    params = Object.keys(data).reduce(function(_qs, k, i){ 
        if(data[k]){
            return _qs + '&' + k + '=' + data[k];
        }else{
            return _qs + '&' + k + '=';
        }
    }, '').substring(1);;
    url = url + "?" + params;
    return url
};

Can be used in a function as in the example:

data_to_get = {
        "id": 1,
        "name": "Test",
};    

function get_conta_receita(data_to_get = {}) {
    var myData =  {
        "id": data_to_get[\'id\'],
        "name": data_to_get[\'name\'],
    };        
    const defaults = {
        'method': 'GET',
        'credentials': 'include',
        'headers': new Headers({
          'X-CSRFToken': csrf_token,
          'Accept': 'application/json',
          'Content-Type': 'application/json',
          'X-Requested-With': 'XMLHttpRequest'
        }),
    };

    url = montaURL(contas_receita_api, myData);

    fetch(url, defaults)
    .then(function(response) {
        return response.json();      
    }).then(function(data) {
        console.log(data);
    }).catch(function(ex) {
        console.log("parsing failed", ex);
    });
};

Any chance of someone posting an example of the django code that receives "myData" and returns the "data"?
Thanks

data_to_get = {
"id": 1,
"name": "Test",
};

function get_conta_receita(data_to_get = {}) {
var myData = {
"id": data_to_get['id'],
"name": data_to_get['name'],
};
const defaults = {
'method': 'GET',
'credentials': 'include',
'headers': new Headers({
'X-CSRFToken': csrf_token,
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}),
};

url = montaURL(contas_receita_api, myData);

fetch(url, defaults)
.then(function(response) {
    return response.json();      
}).then(function(data) {
    console.log(data);
}).catch(function(ex) {
    console.log("parsing failed", ex);
});

};

Thanks, it helped me too .

Finally, someone explaining this. Thank you!