set token in authorization header

Question

I want to set token in authorization header but the token is set null. I tried to get the token from chrome storage but token is not set though i get the token from the storage when i console the result['user_token'] inside the callback.

here is the code

var token = null; // i need this token in fetchTopics as well
function fetchCurrentUser() {
  const apiUrl = `api2.navihq.com/get_current_user`;
  chrome.storage.sync.get(['user_token'], function(result) {
    token = result['user_token'];
  });
  console.log('token', token); // getting null
  const headers = new Headers();
  headers.append('Content-Type', 'application/json');
  headers.append('Authorization', `Token: ${token}`)
  fetch(apiUrl, {
    method: 'GET',
    headers
  })
  .then(function(response) {
    console.log('response', response);
    return response.json()
  })
  .then(function(data) {
    console.log('data', data);
    return JSON.parse(atob(data.user))
  })
}


$(window).bind('load', function() {
    document.addEventListener('click', init);
  fetchCurrentUser();
  fetchTopics();
});

How do i now set the token in authorization header?

rather perplexingly ... `chrome.storage.sync.get` is **A**syncrhonous — Jaromanda X, May 31 '18 at 05:22
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — wOxxOm, May 31 '18 at 05:26
As @JaromandaX pointed out, chrome.storage.sync.get is asynchronous. Therefore `console.log('token', token); ` will execute before token is assigned in `token = result['user_token'];`. Put your entire code into the callback function. — AngryHacker, May 31 '18 at 05:31

Jaromanda X · Accepted Answer · 2018-05-31T05:50:38.760

The sync in chrome.storage.sync.get doesn't mean it's synchronous

the fact it takes a callback shows it is Asynchronous - not that taking a callback guarantees something is asynchronous of course, but in this case it's clear that it is

So put the fetch inside the callback

function fetchCurrentUser() {
    const apiUrl = `api2.navihq.com/get_current_user`;
    chrome.storage.sync.get(['user_token'], function(result) {
        var token = result['user_token'];
        console.log('token', token); // getting null
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', `Token: ${token}`)
        fetch(apiUrl, {
            method: 'GET',
            headers
        }).then(function(response) {
            console.log('response', response);
            return response.json()
        }).then(function(data) {
            console.log('data', data);
            return JSON.parse(atob(data.user))
        })
    });
}

Alternatively you can "promisify" the chrome.storage.sync.get function

function fetchCurrentUser() {
    const chromeStorageGetPromise = key => 
        new Promise(resolve => chrome.storage.sync.get(key, resolve));

    const apiUrl = `api2.navihq.com/get_current_user`;
    chromeStorageGetPromise(['user_token'])
    .then(({user_token: token}) => {
        console.log('token', token);
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');
        headers.append('Authorization', `Token: ${token}`);
        return fetch(apiUrl, {
            method: 'GET',
            headers
        });
    }).then(response => {
        console.log('response', response);
        return response.json();
    }).then(data => {
        console.log('data', data);
        return JSON.parse(atob(data.user));
    })
}

set token in authorization header

1 Answers1