title: Yield multiple results from API
body: <p>I have a web app that needs to make two separate API calls to a third party web API to get information that is relevant to my app.
  Because this process can take very long and I want to manage user expectations, I've implemented a progress bar on the front end and I want to realistically update the progress because the third party API requests take between 5-15 seconds per call and I need to make between one and three calls to the server.</p>
  <p>This is a summary of the process:</p>
  <ol>
  <li>Javascript sends a JSON object containing two fields to my server</li>
  <li>Python server (Flask) makes 1-3 calls to the third party server depending on info and responses.</li>
  <li>After each succesfull call, based on the response I want to send back an update to my web app on the progress</li>
  <li>Server returns final info</li>
  </ol>
  <p>This is the javascript call from my web app to my server:</p>
  <pre><code>function updateh(x) {
    $.post(&quot;/updatehphrases&quot;, {
        &quot;substance&quot;: JSON.stringify(x)
      },
      function (data) {
          if (Number.isInteger(data)) {
  
              // update the progress bar
                 progressbar(data)
  
              // listen for further responses
                  // TODO
          } else {
  
             // close the connection and use the results
  
      });
  }
  </code></pre>
  <p>My API looks like this:
  (I removed and summarised the parts that work fine in round brackets)</p>
  <pre><code>@app.route(&quot;/updatehphrases&quot;, methods=[&quot;Post&quot;])
  def updatehphrases():
    entry = json.loads(request.form['substance'])
       # (if info already in database:
       #    return findings)
    try:
      #(parse user input and submit first request to third party API)
      # first call completed, yield 25% progress update
      yield 25
      queryAnswer = json.loads(response.content)
  
      #(parse first response and check for relevant info)
      if check1 == &quot;NotFound&quot;:
        # the first api call might not return the desired info
        # (create new query with a different field and retry first call with different info)
        response = requests.get(query)
        queryAnswer = json.loads(response.content)
        # (parse response and check for errors)
        # first call second attempt complete, yield 50% progress update
        yield 50
        if check1b == &quot;NotFound&quot;:
          # failure, cancel the operation
          return &quot;NotFound&quot;
      elif check1 == &quot;OK&quot;:
        # first call contains the info, yield 50% progress update
        yield 50
      # (parse info from first response and make second call)
      response2 = requests.get(query2)
      queryAnswer2 = json.loads(response2.content)
      #second API call successful, process results, yield 75% progress update
      yield 75
      # (parse second response)
      if check2 == &quot;NotFound&quot;:
        # second call returns no results, fail
        return &quot;NotFound&quot;
      elif check2 == &quot;OK&quot;:
        #response 2 contains the info needed, yield 90% progress update
        yield 90
        # (process response and extract relevant info)
        return stream_with_context(json.dumps(findings))
    except Exception as e:
      return f&quot;An Error Occured: {e}&quot;
  </code></pre>
  <p>The problem:</p>
  <ol>
  <li>I cannot find a way to make javascript listen for additional responses after returning the first progress update without restarting the entire process</li>
  <li>Flask has a function called stream_with_context() that should allow me to return multiple responses, but I cannot get it to work properly with all my conditional statements. I need all the conditional statements because I need to parse and check every response to see if it contains the info I need.</li>
  <li>I could theoretically do this entire process in Javascript, but I'm trying to keep as of the heavy lifting and processing of info as possible on the server</li>
  <li>All my attempts thus far to make Javascript listen for further responses usually results in the server restarting the entire process completely every time, so it never gets past 25%</li>
  </ol>
  <p>I've looked into polling, long polling, web sockets, SSE and a couple of other things, but I cannot find a solution that I can adapt to work for this situation.</p>
  <p>What I need is:</p>
  <ol>
  <li>A rough idea on how I could get Javascript to keep listening for further information without re-submitting the API call every time</li>
  <li>The piece of the puzzle missing from my python code to return the progress updates whilst allowing the server to continue making the subsequent third party API calls in the background</li>
  </ol>