Vue Communicates with the Internet Chapter 14}
Our Vue instance will keep track of a few things; write this code to start building the
instance:
new Vue({
el: '#app',
data: {
inProgress: false,
requests: new Object(null),
responses: new Object(null),
counter: 0,
impatientAxios: undefined
}
})I would like to use JavaScript sets for the requests and responses; unfortunately, sets are not
reactive in Vue; the closest thing we can use is an object, which is empty for now, that is, we
are initializing requests and responses to an empty object.
The impatientAxios variable will be filled upon creation. Normally, Axios waits as long
as the browser will wait for a response. Since we are impatient, we will create an Axios that
will drop the connection after 3 seconds:
created () {
this.impatientAxios = axios.create({
timeout: 3000
})
}The last thing we need to build is the order method. Since we don't have a web server to
make actual requests to, we will use the http://httpstat.us/200 endpoint that simply
answers 200 OK to all our requests:
methods: {
order (event, oldRequest) {
let request = undefined
if (oldRequest) {
request = oldRequest
} else {
request = { req: ' ', id: this.counter++}
}
this.inProgress = true
this.requests[request.id] = request
this.impatientAxios.get('http://httpstat.us/200')
.then(response => {
this.inProgress = false