vue中axios的封装

最新推荐文章于 2025-03-11 19:09:15 发布

m0_50520143

最新推荐文章于 2025-03-11 19:09:15 发布

阅读量257

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/m0_50520143/article/details/116425405

版权

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了在Vue项目中为什么要对axios进行封装，强调了封装可以减少冗余代码并统一管理请求。同时，详细说明了axios的安装步骤，并概述了封装axios的基本流程，包括在src目录创建request文件夹，以及在其中的http.js和api.js文件中分别封装axios和管理接口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为什么要对axios进行封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。axios有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。
在一个完整的项目中，和服务端的交互会很频繁，一个项目会有很多请求，冗余代码很多。所以将请求封装，统一管理还是很有必要的。
axios的封装主要目的就是在帮助我们简化项目代码和利于后期的更新维护。

axios的安装

npm install axios; // 安装axios

axios的封装

一般在项目的src目录中会新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装axios，而api.js用来统一管理接口。

代码示例：

import axios from 'axios'  // 引入axios
import route from '../router/index' 
const http = axios.create({
    baseURL: 'http://39.100.7.70:81/', // 统一的URL路径
    timeout: 5000  // 设置默认的请求超时时间
})

// 请求拦截器
request.interceptors.request.use(config => {
    return config;
}, error => {
    return Promise.reject(error);
});
// 响应拦截器
request.interceptors.response.use(response => {
    return response;
}, error => {
    route.push('/myerror')
    return Promise.reject(error);
});

export default http  // 导出 http