如何封装一个axios,封装axios有哪些好处

什么是Axios

Axios 是一个基于 Promise 的 HTTP 客户端,用于在浏览器和 Node.js 中发送异步网络请求。它简化了发送 GETPOSTPUTDELETE 等请求的过程,并且支持请求拦截、响应拦截、取消请求和自动处理 JSON 数据等功能。

为什么要封装Axios

封装 Axios 可以统一管理项目中的网络请求,简化代码并提高维护性和可扩展性。通过请求和响应拦截器,我们可以处理鉴权、错误处理等复杂逻辑,同时还能方便地应对不同的网络请求需求。具体来说,封装 Axios 可以带来以下好处:

  • 统一处理请求和响应:集中处理错误、鉴权、日志记录和通用配置。
  • 简化代码:避免在每个模块中重复配置请求头、超时等参数。
  • 提升可维护性:在一个地方集中管理全局配置,便于后续修改和维护。
  • 处理多样需求:实现请求节流、取消重复请求等功能,满足不同场景的需求。

通过这些优化,封装 Axios 能够显著提升项目的整体质量和开发效率。

如何封装Axios

在Vue大型项目中使用Axios,可以按照以下步骤进行:

1. 全局封装Axios

首先,创建一个单独的文件 request.js 来封装 Axios 的全局配置:

javascript 复制代码
import axios from 'axios';

// 创建 Axios 实例
const axiosInstance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // 配置基础URL
  timeout: 5000, // 设置超时时间
  headers: { 'Content-Type': 'application/json' }
});

// 请求拦截器
axiosInstance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`; // 统一添加Authorization头
    }
    return config;
  },
  error => Promise.reject(error)
);

// 响应拦截器
axiosInstance.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response.status === 401) {
      // 处理未授权
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;
2. Vue项目中全局引入Axios

main.js 中全局引入 Axios 封装:

javascript 复制代码
import axiosInstance from './utils/request';

Vue.prototype.$http = axiosInstance;

这样你可以在任意 Vue 组件中使用 this.$http 发起网络请求。

3. 模块化管理API

对于大型项目,将API请求模块化管理,可以在 api 文件夹中按功能模块划分文件:

例如在 api/user.js

javascript 复制代码
import axios from '../utils/request';

export function getUserInfo(params) {
  return axios.get('/user/info', params);
}

export function updateUser(data) {
  return axios.post('/user/update', data);
}
4. 在组件中使用Axios

在组件中直接调用封装好的API方法:

javascript 复制代码
import { getUserInfo } from '@/api/user';
​
export default {
  data() {
    return {
      userInfo: null
    };
  },
  created() {
    const parmas = {
      name: 'admin',
      password: '123456'​
    ​}
    this.fetchUserInfo(parmas ​);
  },
  methods: {
    async fetchUserInfo(params​) {
      try {​
        this.userInfo = await getUserInfo(params​);
      } catch (error) {
        console.error('获取用户信息失败', error);
      }
    }
  }
};
相关推荐
学不会•11 分钟前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic4 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā4 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年5 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder5 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727575 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架