在 axios 中返回 object 而不是 null

Question

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!

Answer 1

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
})