使用thunk有条件地执行异步不会执行两次

Question

I'm following along with the Kyle Simpson Rethinking Asynchronous JavaScript video course and am confused about how his thunk pattern is using closures. The code is like this:

function ajax(url, cb) {
  $.ajax({ url: `text/${url}`, type: 'GET', dataType: 'json' })
  .done(data => {
    cb(data)
  })
}

function getFile(file) {
  var text, fn;
  ajax(file,function(response){
    if (fn) {
      fn(response)
    } else {
      text = response
    }
  })
  return function th(cb) {
    if (text) {
      cb(text)
    } else {
      fn = cb
    }
  }
}

var th1 = getFile('1')
var th2 = getFile('2')
var th3 = getFile('3')

th1(function ready(text){
  console.log(text)
  th2(function ready(text){
    console.log(text)
    th3(function ready(text){
      console.log(text)
      th2(function (text) {
        console.log(text)
      })
    })
  })
})

I added the extra call to th2 in the final nested portion. I expected this use of closures to return the value originally printed from th2 , stored in the closure variable text in the getFile function, ie not make another network call. Though that is not what happens: execution stops after printing the text in the t3 callback.

Why doesn't this closure return its already retrieved value?

Answer 1

I expected this use of closures to return the value originally printed from th2 , stored in the closure variable text in the getFile function. Though that is not what happens: execution stops after printing the text in the t3 callback.

The problem with these thunks is that you cannot use them twice (at least, when the first use is asynchronous). The value is never stored in the closure variable text . Why? Because th2 was run the first time before the ajax call succeeded, which ran

if (text) // still empty
  …
else // nope, nothing yet, store for later
 fn = cb

Then later, when ajax calls the callback, it will only run

if (fn) // we got something to call
  fn(response)
…

and not text = response . So when th2 is called a second time later (or, worse, immediately from within the callback), it will again just try to store the cb in the fn variable, but nothing will call that.

---

A possible workaround would be to do

… // in the thunk closure
ajax(file, function(response) {
  text = response;
  if (fn) {
    fn(response)
  }
})

instead which would make your code work, but still be broken: what if th2 is called multiple times before the asynchronous ajax callback? Then cb overwrites the previous fn , so ultimately we would need to maintain an array of callbacks that all should get called. Well, do that and add chainability for the callbacks, and you've got the most basic Promise implementation already.