How can I print the "PUT" and "POST" method at the same time?

Question

The function written to the bottom of the two functions works but the other one does not work. I am not getting an error message either. I think the transaction is taking place but nothing has been written. How can I get both to be written to the console? I'll put the console's printout below. Thank you in advance for your answers.

class Request {
    constructor() {
        this.xhr = new XMLHttpRequest
    }

    post(url, data, callback) {
        this.xhr.open("POST", url)
        this.xhr.setRequestHeader("Content-type", "application/json")
        this.xhr.onload = () => {
            if (this.xhr.status === 201) {
                callback(null, this.xhr.responseText)
            } else {
                callback("Hata", null)
            }
        }
        this.xhr.send(JSON.stringify(data))
    }

    put(url, data, callback) {
        this.xhr.open("PUT", url)
        this.xhr.setRequestHeader("Content-type", "application/json")
        this.xhr.onload = () => {
            if (this.xhr.status === 200) {
                callback(null, this.xhr.responseText, callback)
            } else {
                callback("Hata", null)
            }
        }
        this.xhr.send(JSON.stringify(data))
    }
}

const request = new Request()



request.post("https://jsonplaceholder.typicode.com/albums", {
    userId: 9,
    title: "Thriller"
}, function (error, response) {
    if (error === null) {
        console.log(response);
    } else {
        console.log(error);
    }
})

request.put("https://jsonplaceholder.typicode.com/albums/9", {
    userId: 2,
    title: "Thriller"
}, function (error, response) {
    if (error === null) {
        console.log(response);
    } else {
        console.log(error);
    }
})

// Console Print
{
  "userId": 2,
  "title": "Thriller",
  "id": 9
}

score 1 · Answer 1 · answered Feb 28 '21 at 03:51

1

You should use your xhr once, not multiple times. To fix this, simply call const xhr = new XMLHttpRequest() in each method you need it.

answered Feb 28 '21 at 03:51

Evert

93,428
18
118
189

score 0 · Accepted Answer · answered Feb 28 '21 at 03:48

You're only creating one Request object, named request. The first call to request.post() uses this.xhr to perform a POST, but before that async process finishes, you're calling request.put() which performs a PUT, effectively ignoring the previous POST.

A simple way to resolve this is by creating two Request objects:

const request = new Request()
const request2 = new Request()

request.post("https://jsonplaceholder.typicode.com/albums", {
    userId: 9,
    title: "Thriller"
}, function (error, response) {
    if (error === null) {
        console.log(response);
    } else {
        console.log(error);
    }
})

request2.put("https://jsonplaceholder.typicode.com/albums/9", {
    userId: 2,
    title: "Thriller"
}, function (error, response) {
    if (error === null) {
        console.log(response);
    } else {
        console.log(error);
    }
})

You could also refactor your code to use fetch() instead. Other possible solutions: In JavaScript how do I/should I use async/await with XMLHttpRequest?

How can I print the "PUT" and "POST" method at the same time?

2 Answers2