Как изменить последовательность в моем приложении «Делать с помощью JavaScript»? - PullRequest
Новая
       52

Как изменить последовательность в моем приложении «Делать с помощью JavaScript»?

0 голосов
/ 21 ноября 2019

Я работаю над приложением To Do с JavaScript и хочу создать запрос HttpRequest. Это не работает, потому что я вижу данные в самом конце консоли, поэтому мой запрос GET не работает должным образом. Как я могу переключить их, чтобы иметь GET-запрос в конце программы?

Вот ответ данных: 

let url = 'here is my url';
let xhr = new XMLHttpRequest();
xhr.onloadend = (event) => {
            return xhr.result;
};

Я установил заголовок таким образом: 

setHeader() {
        xhr.setRequestHeader('Content-Type','application/json');
}

Моя функция get выглядит следующим образом: 

get(async, header) {
    return new Promise((resolve, reject) => {
        xhr.open('GET', url, async);
        xhr.setRequestHeader(header.name, header.value);
        xhr.send();
        resolve(xhr.response);
    });
}

Я должен использовать HttpClient и JavaScript, я не могу использовать jQuery или что-либо еще.

1 Ответ

0 голосов
/ 21 ноября 2019

Пожалуйста, свяжите функцию getAll в конструкторе ИЛИ вы можете использовать Функция стрелки 

export class HttpClient {
  constructor(url) {
    this.url = url;
    this.xhr = new XMLHttpRequest();
    this.xhr.onloadend = event => {
      console.log("ONLOADEND", this.xhr.response);
      return this.xhr.result;
    };

    this.setHeader = this.setHeader.bind(this);
    this.get = this.get.bind(this);
    this.post = this.post.bind(this);
  }

  setHeader() {
    this.xhr.setRequestHeader("Content-Type", "application/json");
  }

  get(async, header) {
    return new Promise((resolve, reject) => {
      this.xhr.open("GET", this.url, async);
      this.xhr.setRequestHeader(header.name, header.value);
      this.xhr.send();
      console.log("xhr", this.xhr.response);
      resolve(this.xhr.response);
      // return nothing
    });
  }

  post(async, data, header) {
    return new Promise((resolve, reject) => {
      this.xhr.open("POST", this.url + "create", async);
      this.setHeader(header);
      this.xhr.send(data);
      console.log("RESPONSE", this.xhr.response);
      resolve(this.xhr.response);
    });
  }
}

export class TodoList extends HttpClient {
  constructor() {
    super("http://todoapp.test/api/");
    this.items = [];
    this.header = new Headers();
    this.header.set("Accept-Encoding", "application/json");

    this.add = this.add.bind(this);
    this.getAll = this.getAll.bind(this);
  }

  add(todo) {
    this.post(true, JSON.stringify(todo), this.header);
    this.items.push(todo);
  }

  getAll() {
    this.get(true, this.header).then(result => {
      const data = !!result ? result : "[]";
      const items = JSON.parse(data);
      console.log("result:", result);
      items.forEach(item => {
        const todo = new Todo(item.id, item.name, item.status);
        this.items.push(todo);
      });
      console.log("items block:", this.items);
    });
  }
}
...