39. Axios 与 ECharts 速览

一、Axios

1. 实例化

使用 axios.create() 按业务拆分请求实例。

2. 默认配置

集中设置 baseURL、超时、公共请求头。

3. 拦截器

请求拦截器常用于鉴权；响应拦截器常用于错误归一化。

4. 执行顺序

请求拦截器后注册先执行；响应拦截器后注册后执行。

5. 取消请求

页面切换或重复请求场景应及时取消，避免脏数据覆盖。

6. 浏览器与 Node.js 的适配边界

Axios 不是靠业务代码手动判断“浏览器还是 Node.js”后再发请求，而是根据构建目标和运行时选择可用的 adapter：浏览器通常使用 XHR 或 Fetch，Node.js 使用 HTTP/HTTPS adapter。不同版本和构建工具的默认 adapter 可能不同，若项目显式配置了 adapter，应以该配置为准。不要只用 typeof process 之类的判断推断环境，因为 bundler 可能注入兼容对象。

浏览器侧不能读取 Node 的 http 模块，Node 侧也没有 window、DOM 或浏览器 Cookie 自动管理。跨环境共享的应是请求参数、错误模型和业务拦截规则；涉及代理、Cookie、TLS、Agent 或文件流时分别放在对应 adapter 的配置层。

7. 请求去重和重试

可以在请求层按“方法 + 规范化 URL + 关键参数”缓存进行中的 Promise，完成后清理；不要把所有请求都按 URL 去重，也不要让一个消费者取消共享请求后误伤其他消费者。重试只适合幂等请求或服务端明确支持幂等键的写请求，并应限制次数、使用退避和抖动，避免故障时放大流量。

const pending = new Map()

function requestOnce(key, task) {
  if (pending.has(key)) return pending.get(key)
  const promise = Promise.resolve().then(task).finally(() => pending.delete(key))
  pending.set(key, promise)
  return promise
}

requestOnce('GET:/api/profile', () => api.get('/api/profile'))

二、ECharts

1. 配置入口

核心是 option，围绕坐标系、数据集、系列配置。

2. 常见模块

高频包括 title、grid、legend、tooltip、xAxis/yAxis、series。

3. dataset 思路

先整理数据源，再映射维度，图表配置会更稳定。

4. 性能建议

大数据量优先采样、分片渲染和按需更新。