JavaScript中使用axios发起网络请求的实用技巧

在日常开发中，前端和后端的数据交互几乎离不开HTTP请求。相比原生的fetch或XMLHttpRequest，axios因为简洁易用、功能强大，成了很多开发者的首选。特别是在做网页性能优化时，合理使用axios能减少加载时间，提升用户体验。

为什么选axios？

比如你在做一个商品列表页，页面打开就要从服务器拉取数据。用原生写法，光处理错误和兼容性就得写一堆代码。而axios只需要几行就能搞定，并且自动支持JSON转换、拦截请求、超时设置等功能。

基本用法示例

最常见的GET请求长这样：

axios.get('/api/products')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('请求失败：', error);
  });

如果需要带参数，比如搜索关键词或分页，可以直接传入params对象：

axios.get('/api/products', {
  params: {
    page: 1,
    limit: 10,
    keyword: '手机'
  }
});

发送POST请求提交数据

用户填写表单后提交，通常用POST。比如注册账号：

axios.post('/api/register', {
  username: 'john',
  password: '123456'
})
.then(res => {
  alert('注册成功！');
});

设置请求拦截器优化体验

实际项目里，每次请求都要加token验证，手动写太麻烦。可以用拦截器统一处理：

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('auth_token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

这样所有请求都会自动带上认证头，省事又不容易出错。

控制超时避免卡死

网络差的时候，页面一直转圈会让用户不耐烦。给请求设个超时时间更友好：

const instance = axios.create({
  timeout: 5000 // 5秒后超时
});

instance.get('/api/slow-data')
  .catch(err => {
    if (err.code === 'ECONNABORTED') {
      console.log('请求超时，请检查网络');
    }
  });

并发请求提升效率

有时候要同时拉多个接口，比如首页既要广告图又要推荐商品。一个个等太慢，可以用all一次性发起：

Promise.all([
  axios.get('/api/banners'),
  axios.get('/api/recommend')
]).then(results => {
  const [bannersRes, recommendRes] = results;
  renderBanner(bannersRes.data);
  renderRecommend(recommendRes.data);
});

这样两个请求并行执行，总耗时取决于最慢的那个，比串行快得多。

合理利用axios的这些特性，不仅能减少代码量，还能让网页响应更快、更稳定。在网络环境复杂的场景下，这些小细节对用户体验的影响很明显。