Help with XMLHttpRequest

1

I’m using an XMLHttpRequest to fetch and log symbols and prices of 2 stocks.

In this first example, I am running it synchronously, and it works fine, and manages to log information on both stocks:

let xhr = new XMLHttpRequest()
let requestUrl

let processStock = (name) => {
  requestUrl = 
'https://stock-price-checker-proxy--freecodecamp.repl.co/v1/stock/' + name + '/quote'
  xhr.open('GET', requestUrl, false)
  xhr.send()
  let apiResponse = JSON.parse(xhr.responseText)
  console.log(apiResponse['symbol'])
  console.log(apiResponse['latestPrice'])
}

processStock('goog')
processStock('msft')

image
image797×176 12.9 KB

However, I know that this is a bad approach, and would like to make it asynchronous.

So, I’ve rewrote it asynchronously like this. However, only the second stock gets logged.

let xhr = new XMLHttpRequest()
let requestUrl

let processStock = (name) => {
  requestUrl = 'https://stock-price-checker-proxy--freecodecamp.repl.co/v1/stock/' + name + '/quote'
  xhr.open('GET', requestUrl, true)
  xhr.onload = () => {
    let apiResponse = JSON.parse(xhr.responseText)
    console.log(apiResponse['symbol'])
    console.log(apiResponse['latestPrice'])
  }
  xhr.send()
}

processStock('goog')
processStock('msft')

image
image800×134 6.73 KB

Async functions confuse me in general. As per my understanding, the two processStock executions should run independently of each other, ensuring both stocks’ data gets logged, but this does not seem to be the case.

Can someone help me understand why only the second stock gets logged?

2

I am a beginner though, but the request failed - I don’t know why.

You could check the network tab in your dev tool to see it.

3

Two calls to the function are executed, but since you defined xhr globally, it gets overwritten by the second call before the first loads.

To fix this, move the initialization inside the processStock function.

const processStock = (name) => {
  const xhr = new XMLHttpRequest();
  const requestUrl = 'https://stock-price-checker-proxy--freecodecamp.repl.co/v1/stock/' + name + '/quote'
  xhr.open('GET', requestUrl, true)
  xhr.onload = () => {
    let apiResponse = JSON.parse(xhr.responseText)
    console.log(apiResponse['symbol'])
    console.log(apiResponse['latestPrice'])
  }
  xhr.send()
}

processStock('goog')
processStock('msft')

With it inside the function, you actually create two independent instances of XMLHttpRequest.

4

Had a look at the network tab, and yeah it has. I assume it’s because of what the next answer says, that it was overwritten before it could be completed. Thanks for your help!

5

Thank You!

This makes sense. Is it okay to use the same name xhr for both instances since they might both be running at the same time. Are the two executions done at different memory locations?

7

Thanks a lot for your help! Cleared up some concepts for me :slight_smile: