在vue项目中，我们通常都是使用axios与后台进行数据交互，axios有很多好用的特性，这里不多做介绍，相关细节可以查阅axios中文网。在对axios进行封装之前，我们要使用vue脚手架工具创建一个vue项目（这里我用的是cli4）。

安装

cnpm install axios --save-dev; // 安装axioscnpm install qs --save-dev; // 安装qs模块，用来序列化post类型的数据，否则后端无法接收到数据

模块引入

在src目录下创建一个service目录，用于存放接口封装的相关文件。然后在service目录中创建service.js，用于axios、qs模块的引入，并在此文件中对axios进行封装。代码如下（接口域名只有一个的情况）：

import axios from 'axios' //引入axiosimport qs from 'qs' //引入qs，用来序列化post类型的数据，否则后端无法接收到数据// 设置post请求头axios.defaults.headers.post['Content-Type'] = 'application/x-/xxx/", changeOrigin: true, ws: false, }, }, },};

代理配置好了之后，就可以运行项目了，命令行中输入npm run serve,项目启动好了之后，就可以进入页面点击按钮，测试之前做的封装是否好用。

结语

以上就是本人对vue中封装axios的一点心得，文章有错误或需要改进的地方还请与我联系，我将及时进行更正，感谢阅读。

以上就是vue中封装axios并实现api接口的统一管理的详细内容，更多关于vue 封装axios的资料请关注其它相关文章！