question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Instance does not have global interceptors

See original GitHub issue

#### Summary

I searched through all the issues and double checked the ones referenced in https://github.com/mzabriskie/axios/issues/812 but my problem seems to be different.

My problem is that creating an instance does not copy over or use the interceptors added to the global Axios.

import Axios from "axios";

Axios.interceptors.request.use((config) => {
  console.log("Global Interceptor")
  return config;
});

const axiosInstance = () => {
  let instance = Axios.create();
  console.log(Axios.interceptors.request); // Has 1
  console.log(instance.interceptors.request); // Has 0
  return instance;
}

axiosInstance().post("/test", { testing: "data" }); // Doesn't output "Global Interceptor"
Axios.post("/test", { testing: "data" }); // Outputs "Global Interceptor"

#### Context

  • Axios version: 0.16.2
  • Environment: Webpack 2.6.1, Chrome Canary 61.0.3147.0, Mac OS X

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:17
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

25reactions
bierikcommented, Oct 9, 2017

@rubennorte I would suggest not adding the feature of global interceptors. What about extending an existing axios instance. This way the developer exactly knows what interceptors and options are inherited or extended:

import axios from 'axios';

export const api = axios.create({
  baseURL: process.env.API_ROOT,
});

api.interceptors.request.use((request) => {
  request.headers.Authorization = `Bearer mytoken`;
  return request;
});

// Here the pdfInstance extends the api instance so the pdfInstance has also access to the request interceptor but is also able to override the baseURL and adding additional header such as Accept
export const pdfInstance = api.extend({
  baseURL: '/file',
  responseType: 'arraybuffer',
  headers: {
    Accept: 'application/pdf',
  },
});
20reactions
EvanKcommented, Nov 23, 2017

What about a convenience function to pull in interceptors from an existing instance:

// from the default instance
let api = axios.create({baseUrl:"http://internal.mycompany.com"});
api.interceptors.assimilate(axios);

// or from another created instance
let thirdParty = axios.create({baseUrl:"https://partner.example.com"});
thirdParty.interceptors.assimilate(api);

On top of that, you could explicitly pull interceptors from the default instance with a config option:

let api = axios.create({defaultInterceptors:true});
Read more comments on GitHub >

github_iconTop Results From Across the Web

Making axios global in Vue project is not working
However, now I want to define a global interceptor for all axios requests, basically to catch all 401 unauthorized responses from the backend ......
Read more >
How to globally use Axios instance and interceptors in Vue.js
For Vue, you can add interceptor basically anywhere, I'm going to add it in the main.js file. Vue.prototype.$http = api;. You'll need to...
Read more >
Setting up Axios Interceptors for all HTTP calls in an application
Setting up Axios Interceptors for all HTTP calls in an application. Automatically intercept all the requests and responses so you don't have to ......
Read more >
Axios Instance & Interceptors
Interceptors are methods which are triggered before the main method. There are two types of interceptors: request interceptor: this is called before the...
Read more >
Message Channels
Since message channels may or may not buffer messages (as discussed ... Starting with version 5.1, global channel interceptors now apply to ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found