I have been trying to update my Angular version from 5 to version 9,1 and I have been facing some issues with the headers of my API calls. even though I have set up a process for the headers with the proper authorization. but whenever I try to make the API call the headers do not seem to show up. I have tested through postman if the API is callable with the token and it working as intended. Any ideas are appreciated.
getProfileDetails(userid) {
return this.http.get(`${env.p3ApiUrl}/users/${userid}`, this.requestOptions()).pipe(
catchError(this.handleError)).toPromise();
}
private requestOptions() {
const header = new HttpHeaders().set('content-type', 'application/json')
.set('Access-Control-Allow-Origin', '*')
.set('Authorization', 'Bearer ' + this.getTokenString());
const requestOptions = {headers: header};
return requestOptions;
}
async getToken(){
return await this.storage.get('userToken');
}
getTokenString(): any {
this.getToken().then((val) => {
console.log(val);
return val;
});
}
Error:
Error: Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":401,"statusText":"OK","url":"https://apicarenew.clinakos.com/users/50992","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://apicarenew.clinakos.com/users/50992: 401 OK","error":{"message":"unauthorized"}}
This is (largely) why I hate async. People think it is magical time-traveling pixie dust. It isn’t.
Rewrite this without using async, and declare return value types for each function. You will immediately see what the problem is. Incidentally, Authorization is the only header you should be setting here: HttpClient handles Content-Type, and Access-Control-Allow-Origin makes no sense on the client side.
1 Like
Many have fallen into this trap (like I did before I understood) because they miss this one thing about async /await and to quote MDN
— in fact, await only works inside async functions…
Async/await makes your code look synchronous, and in a way it makes it behave more synchronously. The await keyword blocks execution of all the code that follows until the promise fulfills, exactly as it would with a synchronous operation. It does allow other tasks to continue to run in the meantime, but your own code is blocked.
for example someone looking at this without this understanding 
will expect the following code
async function hello() {
return greeting = await new Promise((resolve, reject) => {
setTimeout(function(){
resolve('Success!');
}, 5000);
});
}
// Call the async function
(function (){
console.log('about to call function hello');
hello().then(console.log);
console.log('function hello has been called');
})()
to produce
about to call function hello
Success!
function hello has been called
But alas it is not so 
Here is the outcome…
1 Like
I guess the fundamental nature of my beef with async/await is that I consider that a categorically bad thing, because it encourages people to continue to program imperatively.
I personally spent decades doing that. I get how deeply ingrained of a habit it is. It took me several months of banging my head incessantly against the wall before I was able to really embrace functional and reactive thinking, but I think that is the absolutely most important thing one can do as a web app author.
And, at least for me, async and await encourage me to think in a way that I believe to be fundamentally unsuited for web applications.
having come from a background of Basic very early on in programming, anything imperative was like pouring water to onto a sponge, getting my head out of the sand has been no mean task.
1 Like
