如何在Vue项目中封装axios

server/2024/12/21 21:08:51/

文章目录

    • 一、axios简介
      • 基本使用
    • 二、封装axios的原因
    • 三、封装axios的方法
      • 1. 设置接口请求前缀
      • 2. 设置请求头和超时时间
      • 3. 封装请求方法
      • 4. 添加请求拦截器
      • 5. 添加响应拦截器
      • 小结

一、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>

在项目中导入并使用:

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

并发请求:

javascript">axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (res1, res2) {// 处理响应}));

二、封装axios的原因

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

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

三、封装axios的方法

1. 设置接口请求前缀

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

javascript">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 中配置代理转发以实现跨域:

javascript">devServer: {proxy: {'/proxyApi': {target: 'http://dev.xxx.com',changeOrigin: true,pathRewrite: {'^/proxyApi': ''}}}
}

2. 设置请求头和超时时间

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

javascript">const service = axios.create({timeout: 30000,headers: {'Content-Type': 'application/json;charset=utf-8'}
});

3. 封装请求方法

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

javascript">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 文件中,便于统一管理:

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

在页面中直接调用:

javascript">import { getorglist } from '@/assets/js/api';
getorglist({ id: 200 }).then(res => {console.log(res);
});

4. 添加请求拦截器

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

javascript">axios.interceptors.request.use(config => {const token = localStorage.getItem('token');token && (config.headers.Authorization = token);return config;
}, error => Promise.reject(error));

5. 添加响应拦截器

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

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


http://www.ppmy.cn/server/132217.html

相关文章

调用AI 通过相机识别地标

https://www.youtube.com/watch?vViRfnLAR_Uc&listPLQkwcJG4YTCRJxkPPDBcKqDWrfF5qanQs&index3学习视频 TensorFlow Hub 机器学习模型的代码库 找到地标模型 如何在Android上使用ts模型 https://blog.tensorflow.org/2018/03/using-tensorflow-lite-on-android.html…

Vue实现动态表单

使用 Vue 实现动态表单 在前端开发中&#xff0c;我们经常遇到根据用户输入动态生成不同表单项的需求。这类动态表单不仅提升了用户体验&#xff0c;还可以让复杂的交互流程变得简洁而高效。本文将详细讲解如何使用 Vue 3 的响应式特性&#xff0c;逐步构建一个递归动态表单。…

Spring Boot 3新特性@RSocketExchange轻松实现消息实时推送

Spring Boot 3新特性RSocketExchange轻松实现消息实时推送 随着微服务架构的普及&#xff0c;实时消息推送成为许多现代应用程序的核心需求。Spring Boot 3引入了RSocketExchange注解&#xff0c;这一新特性使得开发者能够轻松实现消息实时推送&#xff0c;极大地简化了客户端…

js面试题---js伪类和伪元素的区别

一 伪类&#xff08;Pseudo-classes&#xff09; 1 定义 伪类是用于选择处于特定状态或条件下的 HTML 元素。它们通常以单冒号 (&#x1f603; 开头&#xff0c;后面跟着伪类名称。这些状态可能与用户的交互、元素在文档中的结构位置等相关。 2 常见伪类 :hover 当鼠标悬停…

游戏服务端架构演进

文章目录 前言初出茅庐粗通皮毛略有小成炉火纯青内劲深厚最后 前言 对于网络游戏&#xff0c;一般分为客户端和服务端&#xff0c;客户端主要负责界面图像的渲染与一些交互操作&#xff0c;服务端主要负责数据的业务处理与存储还有与客户端之间的信息交互 比如玩家聊天、广播…

【C语言教程】【常用类库】(十三)异常处理 - <setjmp.h> 和 <assert.h>

13. 异常处理 - <setjmp.h> 和 <assert.h> 在C语言中&#xff0c;异常处理不像在一些现代高级语言中有内建的 try-catch 机制&#xff0c;但可以通过使用 <setjmp.h> 提供的setjmp和longjmp 来实现类似的异常处理机制。同时&#xff0c;<assert.h> 提…

『网络游戏』客户端发送消息到服务器【17】

将上一章服务器的协议PEProtocol的.dll文件重新生成导入unity客户端中 命名为Net 点击生成 另一种导入.dll文件方式 在客户端粘贴即可 此时Net文件夹的.dll文件就导入进来了 创建脚本&#xff1a;NetSvc.cs 编写脚本&#xff1a;NetSvc.cs 修改脚本&#xff1a;GameRoot.cs 在…

从opencv-python入门opencv--GUI功能之绘图鼠标与图像界面的交互

从opencv-python入门opencv--GUI功能之绘图和鼠标操作 一、文章介绍二、opencv绘制直线、矩形、圆形1、cv.line()2、cv.circle()3、cv.rectangle()4、在图像上绘制直线、矩形和圆形5、cv.ellipse()&#xff08;在空白画布上绘制椭圆&#xff09;&#xff08;1&#xff09;img …