Using promise in loop results in Promise failure

问题:

I'd like to reuse the same code in a loop. This code contains promises. However, when iterating, this code results in an error.

I've tried using for and while loops. There seems to be no issue when I use the for loop for a single iteration.

Here is a minimal version of my code:

var search_url = /* Some initial URL */
var glued = "";
for(var i = 0; i < 2; i++)
{
    const prom = request(search_url)
    .then(function success(response /* An array from a XMLHTTPRequest*/) {
          if (/* Some condition */)
          {
              search_url = /* Gets next URL */
              glued += processQuery(response[0]);
          } else {
              console.log("Done.")
          }
    })
    .catch(function failure(err) {
          console.error(err.message); // TODO: do something w error
    })
}
document.getElementById('api-content').textContent = glued;

I expect the results to append to the variable glued but instead, I get an error: failure Promise.catch (async) (anonymous) after the first iteration of the loop.

回答1:

Answer:

You can use the Symbol.iterator in accordance with for await to perform asynchronous execution of your promises. This can be packaged up into a constructor, in the example case it's called Serial (because we're going through promises one by one, in order)

function Serial(promises = []) {
    return {
        promises,
        resolved: [],
        addPromise: function(fn) {
            promises.push(fn);
        },
        resolve: async function(cb = i => i, err = (e) => console.log("trace: Serial.resolve " + e)) {
            try {
                for await (let p of this[Symbol.iterator]()) {}
                return this.resolved.map(cb);
            } catch (e) {
                err(e);
            }
        },
        [Symbol.iterator]: async function*() {
            this.resolved = [];
            for (let promise of this.promises) {
                let p = await promise().catch(e => console.log("trace: Serial[Symbol.iterator] ::" + e));
                this.resolved.push(p);
                yield p;
            }
        }
    }
}

What is the above?

• It's a constructor called Serial.
• It takes as an argument an array of Functions that return Promises.
• The functions are stored in Serial.promises
• It has an empty array stored in Serial.resolved - this will store the resolved promise requests.
• It has two methods:
  • addPromise: Takes a Function that returns a Promise and adds it to Serial.promises
  • resolve: Asynchronously calls a custom Symbol.iterator. This iterator goes through every single promise, waits for it to be completed, and adds it to Serial.resolved. Once this is completed, it returns a map function that acts on the populated Serial.resolved array. This allows you to simply call resolve and then provide a callback of what to do with the array of responses. A.e. .resolve()((resolved_requests) => //do something with resolved_requests)

Why does it work?

Although many people don't realize this Symbol.iterator is much more powerful than standard for loops. This is for two big reasons.

The first reason, and the one that is applicable in this situation, is because it allows for asynchronous calls that can affect the state of the applied object.

The second reason is that it can be used to provide two different types of data from the same object. A.e. You may have an array that you would like to read the contents of:

let arr = [1,2,3,4];

You can use a for loop or forEach to get the data:

arr.forEach(v => console.log(v)); 
// 1, 2, 3, 4

But if you adjust the iterator:

arr[Symbol.iterator] = function* () {
  yield* this.map(v => v+1);
};

You get this:

arr.forEach(v => console.log(v));
// 1, 2, 3, 4
for(let v of arr) console.log(v);
// 2, 3, 4, 5

This is useful for many different reasons, including timestamping requests/mapping references, etc. If you'd like to know more please take a look at the ECMAScript Documentation: For in and For Of Statements

---

Use:

It can be used by calling the constructor with an Array of functions that return Promises. You can also add Function Promises to the Object by using

new Serial([])
.addPromise(() => fetch(url))

It doesn't run the Function Promises until you use the .resolve method.

This means that you can add promises ad hoc if you'd like before you do anything with the asynchronous calls. A.e. These two are the same:

With addPromise:

 let promises = new Serial([() => fetch(url), () => fetch(url2), () => fetch(url3)]); 
 promises.addPromise(() => fetch(url4));
 promises.resolve().then((responses) => responses)

Without addPromise:

 let promises = new Serial([() => fetch(url), () => fetch(url2), () => fetch(url3), () => fetch(url4)])
.resolve().then((responses) => responses)

---

Data:

Since I can't really replicate your data calls, I opted for JSONPlaceholder (a fake online rest api) to show the promise requests in action.

The data looks like this:

let searchURLs = ["https://jsonplaceholder.typicode.com/todos/1", 
"https://jsonplaceholder.typicode.com/todos/2", 
"https://jsonplaceholder.typicode.com/todos/3"]

//since our constructor takes functions that return promises, I map over the URLS:
.map(url => () => fetch(url));

To get the responses we can call the above data using our constructor:

let promises = new Serial(searchURLS)
                .resolve()
                .then((resolved_array) => console.log(resolved_array));

Our resolved_array gives us an array of XHR Response Objects. You can see that here:

    function Serial(promises = []) {
    	return {
    		promises,
    		resolved: [],
    		addPromise: function(fn) {
    			promises.push(fn);
    		},
    		resolve: async function(cb = i => i, err = (e) => console.log("trace: Serial.resolve " + e)) {
    			try {
    				for await (let p of this[Symbol.iterator]()) {}
    				return this.resolved.map(cb);
    			} catch (e) {
    				err(e);
    			}
    		},
    		[Symbol.iterator]: async function*() {
    			this.resolved = [];
    			for (let promise of this.promises) {
    				let p = await promise().catch(e => console.log("trace: Serial[Symbol.iterator] ::" + e));
    				this.resolved.push(p);
    				yield p;
    			}
    		}
    	}
    }
    
let searchURLs = ["https://jsonplaceholder.typicode.com/todos/1", "https://jsonplaceholder.typicode.com/todos/2", "https://jsonplaceholder.typicode.com/todos/3"].map(url => () => fetch(url));

let promises = new Serial(searchURLs).resolve().then((resolved_array) => console.log(resolved_array));

---

Getting Results to Screen:

I opted to use a closure function to simply add text to an output HTMLElement.

This is added like this:

HTML:

   <output></output>

JS:

 let output = ((selector) => (text) => document.querySelector(selector).textContent += text)("output");

---

Putting it together:

If we use the output snippet along with our Serial object the final functional code looks like this:

  let promises = new Serial(searchURLs).resolve()
  .then((resolved) => resolved.map(response =>
    response.json()
    .then(obj => output(obj.title))));

What's happening above is this:

• we input all our functions that return promises. new Serial(searchURLS)
• we tell it to resolve all the requests .resolve()
• after it resolves all the requests, we tell it to take the requests and map the array .then(resolved => resolved.map
• the responses we turn to objects by using .json method. This is necessary for JSON, but may not be necessary for you
• after this is done, we use .then(obj => to tell it to do something with each computed response
• we output the title to the screen using output(obj.title)

---

Result:

---

let output = ((selector) => (text) => document.querySelector(selector).textContent += text)("output");

function Serial(promises = []) {
  return {
    promises,
    resolved: [],
    addPromise: function(fn) {
      promises.push(fn);
    },
    resolve: async function(cb = i => i, err = (e) => console.log("trace: Serial.resolve " + e)) {
      try {
        for await (let p of this[Symbol.iterator]()) {}
        return this.resolved.map(cb);
      } catch (e) {
        err(e);
      }
    },
    [Symbol.iterator]: async function*() {
      this.resolved = [];
      for (let promise of this.promises) {
        let p = await promise().catch(e => console.log("trace: Serial[Symbol.iterator] ::" + e));
        this.resolved.push(p);
        yield p;
      }
    }
  }
}

let searchURLs = ["https://jsonplaceholder.typicode.com/todos/1", "https://jsonplaceholder.typicode.com/todos/2", "https://jsonplaceholder.typicode.com/todos/3"].map(url => () => fetch(url));

let promises = new Serial(searchURLs).resolve()
  .then((resolved) => resolved.map(response =>
    response.json()
    .then(obj => output(obj.title))));

<output></output>

---

Why go this route?

It's reusable, functional, and if you import the Serial Constructor you can keep your code slim and comprehensible. If this is a cornerstone of your code, it'll be easy to maintain and use.

---

Using it with your code:

I will add how to specifically use this with your code to fully answer your question and so that you may understand further.

NOTE glued will be populated with the requested data, but it's unnecessary. I left it in because you may have wanted it stored for a reason outside the scope of your question and I don't want to make assumptions.

//setup urls:
var search_urls = ["https://jsonplaceholder.typicode.com/todos/1", "https://jsonplaceholder.typicode.com/todos/2"];
var request = (url) => () => fetch(url);
let my_requests = new Serial(search_urls.map(request));

//setup glued (you don't really need to, but if for some reason you want the info stored...
var glued = "";

//setup helper function to grab title(this is necessary for my specific data)
var addTitle = (req) => req.json().then(obj => (glued += obj.title, document.getElementById('api-content').textContent = glued));

// put it all together:
my_requests.resolve().then(requests => requests.map(addTitle));

---

Using it with your code - Working Example:

function Serial(promises = []) {
    	return {
    		promises,
    		resolved: [],
    		addPromise: function(fn) {
    			promises.push(fn);
    		},
    		resolve: async function(cb = i => i, err = (e) => console.log("trace: Serial.resolve " + e)) {
    			try {
    				for await (let p of this[Symbol.iterator]()) {}
    				return this.resolved.map(cb);
    			} catch (e) {
    				err(e);
    			}
    		},
    		[Symbol.iterator]: async function*() {
    			this.resolved = [];
    			for (let promise of this.promises) {
    				let p = await promise().catch(e => console.log("trace: Serial[Symbol.iterator] ::" + e));
    				this.resolved.push(p);
    				yield p;
    			}
    		}
    	}
    }


//setup urls:
var search_urls = ["https://jsonplaceholder.typicode.com/todos/1", "https://jsonplaceholder.typicode.com/todos/2"];
var request = (url) => () => fetch(url);
let my_requests = new Serial(search_urls.map(request));

//setup glued (you don't really need to, but if for some reason you want the info stored...
var glued = "";

//setup helper function to grab title(this is necessary for my specific data)
var addTitle = (req) => req.json().then(obj => (glued += obj.title, document.getElementById('api-content').textContent = glued));

// put it all together:
my_requests.resolve().then(requests => requests.map(addTitle));

<div id="api-content"></div>

---

Final Note

It's likely that we will be seeing a prototypal change to the Promise object in the future that allows for easy serialization of Promises. Currently (7/15/19) there is a TC39 Proposal that does add a lot of functionality to the Promise object but it hasn't been fully vetted yet, and as with many ideas trapped within the Proposal stage, it's almost impossible to tell when they will be implemented into Browsers, or even if the idea will stagnate and fall off the radar.

Until then workarounds like this are necessary and useful( the reason why I even went through the motions of constructing this Serializer object was for a transpiler I wrote in Node, but it's been very helpful beyond that! ) but do keep an eye out for any changes because you never know!

Hope this helps! Happy Coding!

回答2:

Your best bet is probably going to be building up that glued variable with recursion.

Here's an example using recursion with a callback function:

var glued = "";

requestRecursively(/* Some initial URL string */, function() {
  document.getElementById('api-content').textContent = glued;
});

function requestRecursively(url, cb) {
  request(url).then(function (response) {
    if (/* Some condition */) {
        glued += processQuery(response[0]);
        var next = /* Gets next URL string */;

        if (next) {
          // There's another URL. Make another request.
          requestRecursively(next, cb);
        } else {
          // We're done. Invoke the callback;
          cb();
        }
    } else {
        console.log("Done.");
    }
  }).catch(function (err) {
    console.error(err.message);
  });
}