VueJS SSR环境下Axios实例缓存及拦截器生效问题咨询

嘿，我来帮你拆解这两个问题～

一、为什么axios.get('/foo')的config.foo是123而非456？ #

这里的核心点在于Axios全局实例和自定义实例是完全独立的，它们的拦截器、配置都是相互隔离的：

• 你给全局axios对象添加了请求拦截器：axios.interceptors.request.use((config) => { config.foo = 123; });，这个拦截器只会作用于通过全局axios发起的请求（比如axios.get('/foo')）。
• 你创建的instance是一个全新的Axios实例，给它添加的拦截器instance.interceptors.request.use((config) => { config.foo = 456; });，只会作用于通过instance发起的请求（比如instance.get('/foo')）。

你的代码里最后调用的是axios.get('/foo')，走的是全局实例的拦截器，所以config.foo自然是123。如果改成用instance.get('/foo')，就能得到456啦。

另外补充个小细节：你给instance加的verylongunexistingattribute属性其实不会影响Axios的请求逻辑，Axios实例只会识别它内部定义的属性（比如interceptors、defaults等），自定义属性不会被带到请求流程里。

二、如何在请求间缓存Axios实例？ #

Axios实例本身就是设计用来复用的，缓存实例的核心思路是确保整个应用（或请求上下文）中只创建一次实例，后续所有请求都复用这个实例，具体分两种场景：

1. 客户端（Vue/React SPA）场景 #

直接创建一个单例实例，通过模块导出的方式在各个组件/模块中复用：

// axios.js
import axios from 'axios';

// 创建单例实例
const axiosInstance = axios.create({
  baseURL: '/api',
  // 可以在这里预设全局默认配置
});

// 给实例添加拦截器、设置Authorization头等
axiosInstance.interceptors.request.use((config) => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 导出这个单例
export default axiosInstance;

之后在其他文件里直接导入使用即可：

import axiosInstance from './axios.js';

// 所有请求都复用同一个实例
axiosInstance.get('/foo');
axiosInstance.post('/bar', data);

2. SSR（服务端渲染）场景 #

SSR环境下要注意：每个用户的请求都是独立的，不能共享同一个Axios实例（否则会出现用户间的状态污染，比如A用户的token被B用户请求带上）。这时候需要在每个请求的上下文里创建实例：

• 在Vue SSR中，可以在createServerRenderer的回调里，给每个请求创建专属的Axios实例，并注入到Vue实例的$axios中。
• 在React SSR中，可以通过useContext或者服务端的请求上下文，为每个请求生成独立的Axios实例，确保隔离性。

举个Vue SSR的简化示例：

// server.js
import axios from 'axios';
import { createApp } from './app';

server.get('*', (req, res) => {
  // 为当前请求创建专属Axios实例
  const axiosInstance = axios.create({
    baseURL: 'http://api.example.com',
    headers: {
      Authorization: req.headers.authorization // 从请求头获取当前用户的token
    }
  });

  const app = createApp({ axiosInstance });
  // 后续渲染逻辑...
});

这样每个请求都有自己独立的Axios实例，既避免了状态污染，又实现了当前请求内的实例复用。

内容的提问来源于stack exchange，提问作者Borjante