JS 框架 词条目录
前端Wiki/词条/axios 请求库

axios 请求库

定义基于 Promise 的 HTTP 客户端库,浏览器与 Node 环境通用,内置拦截器、超时与取消能力

axios 解决的是原生 XMLHttpRequest 和 fetch 不好用的地方:自动 JSON 转换、请求/响应拦截器、统一错误处理、超时控制、请求取消,这些业务里几乎必然需要的功能它都内置了。配合 async/await 写起来像同步代码一样直白。

最常见的工程实践是在项目里封装一个实例:create 创建带 baseURL 和默认头的实例,请求拦截器塞 token,响应拦截器里统一处理业务错误码并做登录跳转。这样业务代码只关心成功分支,错误处理集中在一处。

JavaScript
// 封装一个带拦截器的请求实例(框架思想演示)
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);
⚠ 常见误区
🔗 相关词条前端组合式 API
← 返回来源章节前端