feat: Global interceptors for Http module

[CatchABus]

Is your feature request related to a problem? Please describe.
There are cases one needs interceptors to use the same code for all functions.

Describe the solution you'd like
Global interceptors like the ones in Angular HttpClient, jQuery ajax, or axios would help in such cases.

Additional context
Since Http module is simplified, an approach similar to axios with a single interceptor per case would do.

// Set request interceptor
Http.interceptors.request = function (opts) {
  // Do something before request is sent
  return opts;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
};

// Set response interceptor
Http.interceptors.response = function (response) {
  // Do something with response data
  return response;
}, function (error) {
  // Do something with response error
  return Promise.reject(error);
};

[edusperoni]

You could write your own interceptor abstraction, or even just use axios in NativeScript.

The NativeScript http module is mostly meant to be like the browser/node http module (which also doesn't have interceptors/etc).

[CatchABus]

You could write your own interceptor abstraction, or even just use axios in NativeScript.

The NativeScript http module is mostly meant to be like the browser/node http module (which also doesn't have interceptors/etc).

Regarding axios, I tried to import it in my app but I always receive errors. Either from Webpack, or axios itself.
Is there any approach to import axios that I should be aware of?

[vallemar]

@dimitrisrk What mistakes do you have? it may be the polyfills, try putting your webpack.config.ts like this:

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
  webpack.chainWebpack((config) => {
    config.resolve.set("fallback", {
      os: false,
      tty: false,
      assert: false,
      stream: false,
      https: false,
      http: false,
      url: false,
      util: false,
      zlib: false,
    });
  });
  webpack.init(env);
  return webpack.resolveConfig();
};

[CatchABus]

@vallemar I was aware of polyfills so I used NodePolyfillPlugin which I use in my web-apps that use Webpack 5.
However, it seems this plugin is exclusive to web.
Setting fallback manually solves axios issue. Thank you very much.

[rigor789]

For axios you just need to import from axios/dist/axios, which can be an alias in webpack (that's what I do):

webpack.chainWebpack(config => {
    config.resolve.alias.set('axios', 'axios/dist/axios')
})

The only thing is to install axios 0.21.1 because newer versions don't work until they merge my PR here: axios/axios#4050
Fixed in axios ^0.23.0...

[bobwatcherx]

For axios you just need to import from axios/dist/axios, which can be an alias in webpack (that's what I do):

webpack.chainWebpack(config => {
    config.resolve.alias.set('axios', 'axios/dist/axios')
})

The only thing is to install axios 0.21.1 because newer versions don't work until they merge my PR here: axios/axios#4050 Fixed in axios ^0.23.0...

i have new error again
my eror in android Devices is

ReferenceError : navigator is not defined

[rigor789]

@bobwatcherx post the full stack trace please.