如何在Vue项目中封装axios

一、axios简介

axios 是一个基于 XMLHttpRequest 的轻量级HTTP客户端,适用于浏览器和Node.js环境。它提供以下特性:

  • 创建XMLHttpRequests和HTTP请求
  • 支持 Promise API
  • 请求和响应拦截
  • 数据转换
  • 取消请求
  • 自动转换JSON数据
  • 客户端XSRF防御 Vue 2.0起,官方推荐使用 axios 替代 vue-resource
基本使用

安装 axios

复制代码
npm install axios --S

或通过CDN引入:

复制代码
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在项目中导入并使用:

复制代码
import axios from 'axios';
axios({
  url: 'xxx',
  method: 'GET',
  params: {
    type: '',
    page: 1
  }
}).then(res => {
  console.log(res);
});

并发请求:

复制代码
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (res1, res2) {
    // 处理响应
  }));
二、封装axios的原因

虽然 axios 的API设计友好,但随着项目规模增长,直接使用 axios 可能会导致以下问题:

  • 重复编写配置代码,如超时时间、请求头等。
  • 难以维护的冗余代码。
  • 缺乏统一的错误处理。 因此,封装 axios 可以提高代码质量和可维护性。
三、封装axios的方法
1. 设置接口请求前缀

根据不同环境(开发、测试、生产)设置不同的请求前缀:

复制代码
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'http://dev.xxx.com';
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'http://prod.xxx.com';
}

vue.config.js 中配置代理转发以实现跨域:

复制代码
devServer: {
  proxy: {
    '/proxyApi': {
      target: 'http://dev.xxx.com',
      changeOrigin: true,
      pathRewrite: {
        '^/proxyApi': ''
      }
    }
  }
}
2. 设置请求头和超时时间

创建 axios 实例时,配置通用请求头和超时时间:

复制代码
const service = axios.create({
  timeout: 30000,
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  }
});
3. 封装请求方法

封装 GETPOST 请求方法,便于统一管理和使用:

复制代码
export function httpGet({ url, params = {} }) {
  return new Promise((resolve, reject) => {
    axios.get(url, { params }).then(res => resolve(res.data)).catch(err => reject(err));
  });
}
export function httpPost({ url, data = {}, params = {} }) {
  return new Promise((resolve, reject) => {
    axios({ url, method: 'post', data, params }).then(res => resolve(res.data)).catch(err => reject(err));
  });
}

将封装的方法放在 api.js 文件中,便于统一管理:

复制代码
import { httpGet, httpPost } from './http';
export const getorglist = (params = {}) => httpGet({ url: 'apps/api/org/list', params });

在页面中直接调用:

复制代码
import { getorglist } from '@/assets/js/api';
getorglist({ id: 200 }).then(res => {
  console.log(res);
});
4. 添加请求拦截器

在请求拦截器中添加通用逻辑,如设置token:

复制代码
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  token && (config.headers.Authorization = token);
  return config;
}, error => Promise.reject(error));
5. 添加响应拦截器

在响应拦截器中处理通用错误和业务逻辑:

复制代码
axios.interceptors.response.use(response => {
  if (response.status === 200) {
    // 根据状态码处理业务逻辑
    return Promise.resolve(response.data);
  } else {
    return Promise.reject(response);
  }
}, error => {
  // 处理错误
  return Promise.reject(error);
});

小结

封装 axios 是提升项目代码质量的重要手段。合理的封装不仅能减少重复代码,还能提高代码的可维护性和可读性。封装方案应根据项目需求灵活设计。

相关推荐
来自星星的坤6 分钟前
如何解决 Vue.js 导航栏下拉菜单“闪现“问题 ! ! !
前端·javascript·vue.js
jianzhi00115 分钟前
深入理解 HTML5 Web Workers:提升网页性能的关键技术解析
前端·html·html5
最新资讯动态24 分钟前
掌握DevEco Studio模拟器这些“隐藏功能”,让鸿蒙应用调试效率事半功倍
前端
irises42 分钟前
tabby-vscode代码补全的一些阅读笔记
前端·javascript
2501_9068014843 分钟前
BY组态-低代码web可视化组件
前端·物联网·低代码·数学建模·编辑器·web
hang_bro1 小时前
element-plus e-tabs与pinia 一起使用的问题
前端·vue.js
VitStratUp1 小时前
antdvue+tree+transfer+vue3 实现树形带搜索穿梭框
前端·vue.js
wangpq1 小时前
微信小程序map组件渲染几百个marker后,页面卡顿,如何解决?
vue.js·微信小程序
千野竹之卫1 小时前
2025最新云渲染网渲100渲染农场使用方法,渲染100邀请码1a12
开发语言·前端·javascript·数码相机·3d·3dsmax
前端提桶人1 小时前
Win11 安装 Sentry 监控
linux·前端