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
}
You should use your xhr once, not multiple times. To fix this, simply call const xhr = new XMLHttpRequest()
in each method you need it.
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?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.