I have a function called login() that calls an HTTP POST request to generate a SID. When the function ends I do apply to a local variable named this.sid.
When I call the Login() function I expect the variable thid.sid to contain the SID value but instead I get undefined

  sid: string | undefined;

  login() {
    const body = `<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:ser="http://www.ca.com/UnicenterServicePlus/ServiceDesk">
              <soapenv:Header/>
              <soapenv:Body>
                  <ser:login>
                    <username>servicedesk</username>
                    <password>?</password>
                  </ser:login>
              </soapenv:Body>
            </soapenv:Envelope>`

    this.http
      .post(this.soapURL, body, {
        headers: {
          'SOAPAction': '""',
          'Content-Type': 'text/xml;charset=UTF-8'
        },
        responseType: 'text'
      })
      .subscribe({
        next: (res) => {
          const parser = new xml2js.Parser({ strict: false, trim: true });
          parser.parseString(res, (err, result) => {
            this.soapenvEnvelope = result;
            this.sid = this.soapenvEnvelope?.["SOAPENV:ENVELOPE"]["SOAPENV:BODY"][0].LOGINRESPONSE[0].LOGINRETURN[0]._;
          });
          console.log(this.sid )
        },
        error: (ex) => {
          console.log(ex)
        }
      })
  }


  foo() {
    this.login()
    console.log(this.sid) // undefined
  }