Vue项目封装API接口及Axios请求与响应拦截，异常处理

最新推荐文章于 2024-07-25 22:35:58 发布

尘生杜若丶

最新推荐文章于 2024-07-25 22:35:58 发布

阅读量4.1k

点赞数

分类专栏： Vue 文章标签：接口封装 axios配置

本文链接：https://blog.csdn.net/weixin_43851769/article/details/90056861

版权

本文介绍了在Vue项目中如何封装Axios以实现数据请求的统一管理和异常处理，包括Axios的配置、接口封装以及如何在不同模块中组织接口，旨在提升代码的整洁性和可维护性。

摘要由CSDN通过智能技术生成

前言：在实际的项目中，面对大量的使用axios请求数据，会使项目代码又多又乱，封装接口API与Axios的重要性不言而喻，不仅可以使代码更加的简洁优雅，而且会使修改接口，维护代码变得更加简单清晰。

一.Axios的封装

在vue项目中我们使用的是axios进行数据请求，还可以利用它进行请求拦截，响应拦截等操作
1. 安装

npm install axios; // 安装axios

2. 配置
在src文件夹中新建一个文件夹，例如request，在该文件夹下创建一个http.js文件（下文都以此做示例）

import axios from 'axios';				//引入axios
import router from '../router';			//引入路由
import store from '../store/index';		//引入我的Vuex配置的文件
import {Message} from "element-ui"      //基于element-ui的弹框组件

上面是我用到的一些东西，另外如果post请求数据传递参数需要序列化时，可以下载引入qs插件

3. 提示弹框，跳转登录，请求失败后的统一处理

/**
   * 提示函数
   * 显示一秒后关闭
   */
 const tip = msg => {
    Message({
         message: msg,
         duration: 1000,
         type:"error"
    });
 }
 
 /**
   * 跳转登录页
   * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
   */
 const toLogin = () => {
     router.replace({
         path: '/Login',
         query: {
             redirect: router.currentRoute.fullPath
         }
     });
 }
 
	// 服务器状态码不是2开头的的情况