title: Promise middleware
body: <p>Recently I had to write the strange code. I'm not sure about it, maybe I'm reinventing the wheel.</p>
  
  <p>Is there any simple way to put the middleware into the promise chain?</p>
  
  <p>Assume we have some promise, for example, that may be <code>axios.get('/users')</code>.
  We want to do something with the result, and then do something else.
  Suppose these actions lie in different parts of application, and we can not combine them into one function.
  Even more, some of them are just syncronous store updates (and does not return anything), and the other may return promise.</p>
  
  <p>One may write</p>
  
  <pre><code>axios
    .get('/users')
    .then((result) =&gt; {
      doSomething(result)
    })
    .then((result) =&gt; {
      doSomethingElse(result)
    })
  </code></pre>
  
  <p>This won't work because the first <code>then</code> does not return a promise, so the second <code>then</code> will not receive the result.
  The correct code (for syncronous actions without promises) is:</p>
  
  <pre><code>axios
    .get('/users')
    .then((result) =&gt; new Promise((resolve, reject) =&gt; {
      doSomething(result)
      resolve(result)
    }))
    .then(result) =&gt; new Promise((resolve, reject) =&gt; {
      doSomethingElse(result)
      resolve(result)
    })
    ...etc...
  </code></pre>
  
  <p>But I don't like this. Am I alone? I would like to have something like:</p>
  
  <pre><code>axios
    .get('/users')
    .thenMiddleware(doSomething)
    .then((result) =&gt; {
      doSomethingElse()
    })
  </code></pre>
  
  <p>That means we want to run <code>doSomething</code> with the result of <code>get('/users')</code> and then, if no error, we want to call the next chain function with the result of <code>get('/users')</code> again.</p>
  
  <p>About the error: I would consider errors only in case if an action returns a promise, and this promise rejects.</p>
  
  <p>Does it makes sense?</p>
  
  <p>That's the function I wrote:</p>
  
  <pre><code>const promiseMiddleware = (target) =&gt; function(...args) {
    return new Promise((resolve, reject) =&gt; {
      if (typeof target === 'function') {
        target = target.apply(this, args)
      }
      if (typeof target === 'object' &amp;&amp; typeof target.then === 'function') {
        // Middleware does not count the result of inner promise, it triggers the promise chain to continue with the incomming data instead.
        // But if the inner promise rejects, middleware returns an inner error.
        target.then((targetResult) =&gt; {
          // So we don't use targetResult here, we just resolve with the incomming args.
          resolve.apply(this, args)
        }).catch(reject)
      } else {
        resolve.apply(this, args)
      }
    })
  }
  </code></pre>
  
  <p>We can use it like <a href="https://jsfiddle.net/kasheftin/uzmtkfuc/" rel="nofollow noreferrer">this</a>. Is that the right approach or do I miss something obvious about promises that's usable in my case?</p>