首页 > 解决方案 > Angular HttpClient 获取请求 - 如何获取发送的文本数据?

问题描述

我有一个与 Django 后端通信的 Angular/Ionic 应用程序。我this.http.get()用来与这个服务器(在 Heroku 上)通信,Django 服务器应该发送文本“OK”。相反,我要么(取决于 的特定用法this.http.get())在 statusText 是我想要的文本的地方收到错误,要么像Object { _isScalar: false, source: {…}, operator: {…} } My Django code 这样简单:

def make(request, otherParams):
    ...
    return HttpResponse("OK")

我知道get()已经到服务器了,因为服务器在调用相应的函数时会运行某些东西。

我如何从 Angular 前端检测 Django 脚本是否发送了“OK”?

(错误不是由于任何各种 CORS 策略,我已经安装了 django-cors-headers)

编辑:如果相关,我在 Windows PC 上,使用 Ionic 5 和 Angular 9 在 localhost/Firefox Nightly 上进行测试。这是我的前端代码,删除了不相关的部分。我提出 GET 请求的方式并不一致,尝试了很多。在下面的帖子中建议了这个,但仍然失败。

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

}

标签: djangoangularionic-framework

解决方案


假设您正在使用HttpClient调用您的GET请求,您实际上需要使用this.http.get().

尝试做这样的事情:

如果你可以使用 async/await

const response = await this.http.get(<url>);

如果你不能使用 async/await

this.http.get(<url>).then(r => console.log('response', r) ).catch( error => console.error(error) );

如果你只是这样做:

const response = this.http.get(<url>);
console.log(response);

您正在有效地记录保存您所追求的数据的数据,Promise而不是已解决的数据。 Promise

如果您可以从 Angular 应用程序中显示更多代码,这将有助于确定这是否是您的问题。对于基本故障排除,我将首先验证您的GET请求(在您的 Python 应用程序中)是否可以自行运行。使用 Postman,您可以对此进行测试(连同方法)。如果您GET要求工作正常,那么问题很可能是您的 Angular 应用程序中的问题,我在上面描述了如何解决。


推荐阅读