request intercepters order is reversed

const axios = require('axios');

axios.interceptors.request.use(function(config) {
	console.log(1);
}, undefined);


axios.interceptors.request.use(function(config) {
	console.log(2);
}, undefined);

axios.get('http://www.baidu.com').then(function() {
	console.log('ok');
}).catch(function() {
	console.log('fail');
});

which prints:

node index.js
2
1
fail

[latel]

anyone here to see this problem?

[marceloloureiro]

/* Edited: I had forgotten to pipe the handlers */

Well, I’ve used a different aproach. First off, I’ve defined an Object called InterceptionHandler. I also have defined a pipe function to chain the handlers

class InterceptionHandler {
  constructor({request, response}) {
    this.request = request;
    this.response = response;
  }
}

const pipe = (...handlers) => arg => handlers.reduce((output, actual) => actual ? actual(output) : output, arg);

So, the ideia is create multiple handlers, and use them in a single pair of interceptors.

const handler1 = new InterceptionHandler(
  {
    request: (config) => {
      console.log('request 1');
      return config;
    },

    response: (response) => {
      console.log('response 1')
      return response;
    }
  }
);

const handler2 = new InterceptionHandler(
  {
    request: (config) => {
      console.log('request 2');
      return config;
    },

    response: (response) => {
      console.log('response 2')
      return response;
    }
  }
);

After that we can line up the handlers in an appropriate execution order.

axios.interceptors.request.use(
  (config) => pipe(handler1.request, handler2.request)(config),
  (error) => Promise.reject(error)
);

axios.interceptors.response.use(
  (response) => pipe(handler1.response, handler2.response)(response),
  (error) => Promise.reject(error)
);

Which produces the output

request 1
request 2
response 1
response 2