How to use 'This' inside an Ajax call in angular [duplicate] - ajax

Question

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 3 years ago.
I am trying to use 'this' once I get response from Ajax call.
but 'this' seems to be undefined. I found few articles using the 'bind', but I am not sure how to implement the bind.
I don't have any problem using 'this' inside the ajax call. I get response from backend as expected.
saveCart(data: any): void {
let body: any = {}
body.data = data
body = JSON.stringify(body)
// the 'this' works here as expected.
let config = this.config.getHeaders() as any
$.ajax({
url: environment.domain + '/cart',
type: "POST",
headers: config,
data: body,
contentType: "application/json",
dataType: "json",
async: false
}).done(function (response) {
// The 'this' below is undefined **********
this.profileService.logout().subscribe(result => {
console.log('User was logged out', result)
})
})
}
Update: Couple of folks had question about why I am not using httpClient.
This function is called when the user closes the browser. Using angular angular's httpclient is freezing the browser (heavy backend code) for few seconds before it closes. so opted for ajax call.
below is the code I am using everywhere else using angular httpClient
this.http.post(environment.domain + url, body, options)
.pipe(retryWhen(this.config.handleRetry))
.pipe(catchError(this.config.handleError))

Answer 1

Try this one.
saveCart(data: any): void {
/* Other code */
var that = this;
$.ajax({
url: environment.domain + '/cart',
type: "POST",
headers: config,
data: body,
contentType: "application/json",
dataType: "json",
async: false,
success:function(response){
//The 'this' below is undefined **********
that.profileService.logout().subscribe(result => { console.log('User was logged out', result) })
}
})

Answer 2

Try to use this way.
Option 1
Before Ajax call, set a new variable...
var that = this;
Now you can user that instead of this. It will work same as this.
Option 2
You can try with ES6 syntax. I haven't try with Ajax but I used this in my code regularly and it works fine for me.
$.ajax({
url: environment.domain + '/cart',
type: "POST",
headers: config,
data: body,
contentType: "application/json",
dataType: "json",
async: false,
success:(() =>{ <----------------Hear is the change
this...
}) =>{
}
})