Angular HttpClient get request - how to get the text data sent? - django

Question

I have an Angular/Ionic app that communicates with a Django backend. I am using this.http.get() to communicate with this server (on Heroku) and the Django server should be sending the text "OK". Instead, I am either (dependent on specific usage of this.http.get()) getting an error where the statusText is the text I want, or something like Object { _isScalar: false, source: {…}, operator: {…} }
My Django code is simple:
def make(request, otherParams):
...
return HttpResponse("OK")
I know that the get() has made it to the server, because the server runs certain things when the corresponding function is called.
How do I, from the Angular frontend, detect if the Django script has sent the "OK" or not?
(The error is not due to any of various CORS policies, I have installed django-cors-headers)
EDIT:
if it's relevant, I'm on a Windows PC, testing on localhost/Firefox Nightly with Ionic 5 and Angular 9.
Here is my frontend code, cutting the irrelevant bits. The way I've made my GET request is not consistent, having tried many. This one is suggested in the below post, and still fails.
import { Component, OnInit } from '#angular/core';
import { AlertController } from '#ionic/angular';
import { HttpClient } from '#angular/common/http';
#Component({
selector: 'app-submit',
templateUrl: './submit.page.html',
styleUrls: ['./submit.page.scss'],
})
export class SubmitPage implements OnInit {
constructor(public alertController: AlertController, private http: HttpClient) { }
ngOnInit() {
}
//irrelevant variable-getting
save() {
console.log(this.list);
if (this.title == null || this.title == "") {
this.presentAlert("Uncompleted fields", "Please complete the Title field!");
}
else if (this.sub == null || this.sub == "") {
this.presentAlert("Uncompleted fields", "Please complete the Subtitle field!");
}
else if (this.content == null || this.content == "") {
this.presentAlert("Uncompleted fields", "Please complete the Content field!");
} else {
try {
if (this.list.length == 0) {
console.log(this.list);
throw "empty list";
}
//more irrelevance
}
catch{ this.presentAlert("Uncompleted fields", "Please complete the list!"); }
if (temp2) {
this.makePost();
}
}
}
makePost() {
var temp = (<root url> + encodeURIComponent(this.title) + `/` + (this.posterID).toString() + '/' + encodeURIComponent(this.sub) + '/' + encodeURIComponent(this.content) + '/' + this.happy.toString() + '/' + this.angry.toString() + `/` + this.stressy.toString() + `/` + this.energy.toString() + '/' + this.worry.toString());
console.log(temp);
this.http.get(temp).toPromise()
.then(r => console.log('response', r)).catch(error => console.error(error));
}
}

Answer 1

Assuming you are using the HttpClient to invoke your GET request, you need to actually do something with this.http.get().
Try doing something like this instead:
If you can use async/await
const response = await this.http.get(<url>);
If you cannot use async/await
this.http.get(<url>).then(r => console.log('response', r) ).catch( error => console.error(error) );
If you just do:
const response = this.http.get(<url>);
console.log(response);
You are effectively logging the Promise and not the resolved Promise that holds the data you're after.
If you can show more code from your Angular app, it would help determine if this is your problem or not. For basic troubleshooting, I would first validate that your GET request (in your Python app) works by itself. Using Postman, you can test this (along with methods). If you GET request works fine, then the issue is more than likely something in you angular app which I described how to fix above.

Answer 2

It turned out that my Angular script was trying to interpret the response as JSON, not the plaintext I wanted. Using the code from the answer by mwilson and adding { responseType: 'text' } into the get() parameters, the console now logs the response successfully.
My The code snippet now looks like this: this.http.get(url, { responseType:'text'}).toPromise().then(r => console.log(r)).catch(error => console.error(error));
BTW feel free to point out any improvements/optimizations to the above code if you feel it needs it.