HttpHeaders set vs. append in Angular

Question

I have a caching interceptor that checks if the request has an x-refresh header present. If so, it ignores any cached request/response combo for this endpoint and goes to the server. However, when I use it in a service call, I have to use the append(...) method instead of the set(...) method on Angular's HttpHeaders class. I couldn't figure out from the documentation or online searches why that is. req.headers.get(x-refresh) returns what I would expect only if append('x-refresh', '') is used. req.headers.get('x-refresh') doesn't return anything if I use set('x-refresh', ''). Why is that? I looked at the source code for this and I don't see anything that would change this behavior, but I'm assuming it is something I overlooked.

What is the difference between set and append other than set will overwrite the header with that key if it already exists, otherwise set it, whereas append will append to that header if it is allowed to append to that header?

Answer 1

The append() method of the Headers interface appends a new value onto an existing header inside a Headers object, or adds the header if it does not already exist.

The difference between set() and append() is that if the specified header already exists and accepts multiple values, set() will overwrite the existing value with the new one, whereas append() will append the new value onto the end of the set of values.

Answer 2

All I was trying to say in my comment is that given that the impetus for your question is solving the coding challenge, posting the code helps the community answer your question and share knowledge. i.e. ask a good question, get a good answer.

However, if you just want someone to explain the differences between set vs. append, you're asking to assume you don't have a problem elsewhere in your code, when what you really want to know is why didn't 'set' work in your implmentation. i.e. you're not ultimately interested in the general differences.

For all we know maybe your syntax is off on some line of code not posted. Check out this related question to see an example of this: Set Headers using append or set does not work in Angular 2. It's also possible there was a bug on set vs. append in a particular angular version that you bumped into. In either event I hope you can see why it doesn't help to focus on generalities.

When you post code, better yet put it on stackblitz etc. it allows community members to better respond since we see the full picture (preceding code, angular version etc.), and trouble-shoot from different angles. Moreover, if there is a reproducible bug, perhaps it actually warrants a ticket on github for the angular project itself.