axios 解决的是原生 XMLHttpRequest 和 fetch 不好用的地方:自动 JSON 转换、请求/响应拦截器、统一错误处理、超时控制、请求取消,这些业务里几乎必然需要的功能它都内置了。配合 async/await 写起来像同步代码一样直白。
最常见的工程实践是在项目里封装一个实例:create 创建带 baseURL 和默认头的实例,请求拦截器塞 token,响应拦截器里统一处理业务错误码并做登录跳转。这样业务代码只关心成功分支,错误处理集中在一处。
// 封装一个带拦截器的请求实例(框架思想演示) function createClient(baseURL) { var queue = []; function request(cfg) { return fetch(baseURL + cfg.url, { method: cfg.method || 'GET', headers: Object.assign({ 'Content-Type': 'application/json' }, cfg.headers), body: cfg.data ? JSON.stringify(cfg.data) : null }).then(function (res) { if (!res.ok) throw new Error('HTTP ' + res.status); return res.json(); }); } // 拦截器队列:发出前统一加工配置 request.use = function (fn) { queue.push(fn); return this; }; return Object.assign(function (cfg) { queue.forEach(function (fn) { cfg = fn(cfg) || cfg; }); return request(cfg); }, { use: request.use }); } var http = createClient('https://api.example.com') .use(function (cfg) { cfg.headers = cfg.headers || {}; cfg.headers.token = 'xxx'; return cfg; }); http({ url: '/user', method: 'POST', data: { name: 'Tom' } }).then(console.log);