typescript - Angular 4 hämta funktionsreturvärde efter http-postförfrågan


Jag skapade en kontrollmetod som skickar ett captcha-svar till Googles server efter att ha löst en reCaptcha och begäran returnerar ett captcha-svars-JSON. Kontrollmetoden returnerar true om captcha-svaret är =="success", annars returnerar den false.

Förfrågan skickas med HTTP POST, men problemet jag står inför är: hur får jag det booleska värdet från kontrollermetoden efter att ha mottagit ett svar efter POST-förfrågan?

Kontrollmetod:

 {
        if(ModelState.IsValid)
        {
            bool success = false;

            var client = new System.Net.WebClient();

            string PrivateKey = "6LeiumYUAAAAAMS0kU0OYXaDK0BxHO7KJqx2zO7l";

            var GoogleReply = client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", PrivateKey, Model.RecaptchaResponse));

            var captchaResponse = Newtonsoft.Json.JsonConvert.DeserializeObject<ReCaptchaController>(GoogleReply);

            success = captchaResponse.Success.ToLower() == "true" ? true : false;

            return Ok(success);
        }

        return BadRequest();

    }

    [JsonProperty("success")]
    public string Success
    {
        get { return m_Success; }
        set { m_Success = value; }
    }

    private string m_Success;
    [JsonProperty("error-codes")]
    public List<string> ErrorCodes
    {
        get { return m_ErrorCodes; }
        set { m_ErrorCodes = value; }
    }

    private List<string> m_ErrorCodes;
}

POST-begäran i DataService:

//Http Post request for server-side reCAPTCHA validation
checkRecaptcha(url: string, data: Object): Observable<boolean> {
    this.timerService.resetTimer();
    return this.http.post(url, JSON.stringify(data), this.sharedService.getRequestHeaders())
        .map((response: Response) => {
            return response.json() as boolean
        })
        .catch((response: Response) => {
            return Observable.throw(response);
        });
}

app.component.ts:

resolved(captchaResponse: string) {
    let data = {
        RecaptchaResponse: captchaResponse
    };
    let result = this.dataService.checkRecaptcha('api/recaptcha/validate', data);
    console.log(result);
}

I Chrome-debuggning får jag en Observable: http://prntscr.com/ke5eeo

Svar #1

Raden return response.json() as boolean returnerar för observablen, inte för din checkRecaptcha-funktion. Du kommer behöva lyssna på den Observable som din egen checkRecaptcha returnerar:

this.dataService.checkRecaptcha('api/recaptcha/validate', data).subscribe(
  (result: boolean) => console.log(result)
);

Svar #2

Du behöver prenumerera på det observerbara...

checkRecaptcha(url: string, data: Object): Observable<boolean> {
    this.timerService.resetTimer();
    return this.http.post(url, JSON.stringify(data), this.sharedService.getRequestHeaders());
}

efteråt bör du kunna anropa tjänsten och prenumerera på dess resultat:

this.dataService.checkRecaptcha('api/recaptcha/validate', data).subscribe((result) => {
   console.log(result);
});