如何使用 JavaScript 更改我的待办事项应用程序的顺序？

Question

I'm working on a To Do App with JavaScript and I want to make a HttpRequest. It doesn't work well because I can see the data at the very end of the console so my GET request isn't work properly. How can I switch them to have the GET request at the end of the program?

Here is the data response:

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

I set the header thus:

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

My get function looks like this:

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

I must use HttpClient and JavaScript, I cannot use jQuery or anything else.

Answer 1

Please bind getAll function in constructor OR you can use Arrow function

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