Объект XMLHttpRequest неправильно возвращает свои параметры

Question

В настоящее время я пытаюсь создать чат-бота через Azure в мобильном приложении Ionic.У меня уже есть чат-бот, запущенный и успешно работающий в приложении, но уникальный идентификатор бота (секретный, я считаю, он называется) напрямую привязан к URL-адресу сайта бота, что означает, что любой пользователь может получить доступ к этому боту, если он получит доступ к этому секрету.,

<iframe id="chat" style="width: 400px; height: 400px;" src='BOT_URL_AND_SECRET'></iframe>

Я решил попробовать другой подход, который я нашел в Интернете, который использует объект XMLHttpRequest для получения токена и помещает секрет моего бота в заголовок.Таким образом, я могу использовать готовое состояние и статус объекта XMLHttpRequest для доступа к боту, чтобы пользователь никогда не видел его секрет.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  xhr: any;

  constructor() {
    this.xhr = new XMLHttpRequest();
    this.xhr.open('GET', "https://webchat.botframework.com/api/tokens", true);
    this.xhr.setRequestHeader('Authorization', 'BotConnector ' + 'BOT SECRET VALUE');
    this.xhr.send();

    if (this.xhr.readyState == 4 && this.xhr.status == 200) {
      ...
    }
  }
}

Однако тело кода в операторе if никогда не выполняется.Я сделал console.log, чтобы проверить значения ReadyState и состояния xhr, но оказалось, что они равны 1 и 0 соответственно.Более того, я развернул объект xhr в консоли, и значение readyState равно 4, а состояние равно 200.

Теперь у меня возникает вопрос: почему объект XMLHttpRequest содержит параметры (т. Е. ReadyState и status), которые мне нужныиспользовать для предоставления полного URL-адреса HTML-файла, но когда я пытаюсь получить к ним доступ, я получаю неверную информацию?

Answer 1

Время!100

Вы тестируете их перед отправкой запроса (но смотрите их в консоли гораздо позже).

Вам нужно подождать, пока состояние готовности изменится.

this.xhr.addEventListener("readystatechange", handler);

function handler(event) {
    if (this.readyState == 4 && this.status == 200) {
        // ....
    }
}

Нет необходимости проверять это вручную.Современные браузеры поддерживают событие загрузки.

this.xhr.addEventListener("load", handler);

function handler(event) {
    // ....
}