Return an object instead of null in axios

user_4052666 0
Viewed 179

Question: Why the Authorization has value is Object instead of null? When the function USER_TOKEN.get() return value is null.

I have a function name is callApi like this

export async function callApi(endpoint, method = "get", body) {
  try {
    const res = await axios({
      method: method,
      url: endpoint,
      data: body,
      headers: {
        Authorization: USER_TOKEN.get()
      }
    });
    if (res && res.data && res.data.success === true) {
      return res.data.payload;
    }
    return Promise.reject(Error("Call api failed"));
  } catch (error) {
    throw error;
  }
}

This is my function USER_TOKEN. And USER_TOKEN.get() just get value from locaStorage item 'userToken'

export const USER_TOKEN = {
  get: () => localStorage.getItem('userToken'),
  set: (newValue) => {
    localStorage.setItem('userToken', `Bearer ${newValue}`);
  },
  delete: () => localStorage.removeItem('userToken'),
};

The result I got is the image below enter image description here

My expectation is the header's element Authorization have value is null instead of Object like the image above.

Please help me explain this issue. Or can you give some keyword to research? Thank you!

axios javascript
1 Answers

Seems Axios does some object checks on each header and some fancy, null-safe stringifying which is what's converting your null into [object Object].

I'd say the best thing to do is programmatically add the header, eg

const authorization = USER_TOKEN.get()
const headers = authorization ? { authorization } : {}
const res = axios({
  method,
  headers,
  url: endpoint,
  // etc
})
user_2833660
Related