vue中封装axios并实现api接口的统一管理


Posted in Vue.js onDecember 25, 2020

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

安装

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

模块引入

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

import axios from 'axios' //引入axios
import qs from 'qs' //引入qs,用来序列化post类型的数据,否则后端无法接收到数据
// 设置post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.withCredentials = false;//在跨域请求时,不会携带用户凭证;返回的 response 里也会忽略 cookie

//创建axios实例,请求超时时间为300秒
const instance = axios.create({
 timeout: 300000,
});

//请求和响应拦截可以根据实际项目需求进行编写
// 请求发起前拦截
instance.interceptors.request.use((config) => {
//这里可以对接口请求头进行操作 如:config.headers['X-Token'] = token
 console.log("请求拦截",config);
 return config;
}, (error) => {
 // Do something with request error
 return Promise.reject(error)
})

// 响应拦截(请求返回后拦截)
instance.interceptors.response.use(response => {
 console.log("响应拦截",response);
 return response;
}, error => {
 console.log('catch', error)
 return Promise.reject(error)
})

//按照请求类型对axios进行封装
const api={
 get(url,data){
	return instance.get(url,{params:data})
 },
 post(url,data){
	return instance.post(url,qs.stringify(data))	
 }, 
}
export {api}

上述代码是接口域名只有一个的情况(多数情况),当接口域名有多个的时候(少数情况),我们需要对之前的封装进行改造,代码如下:

import axios from 'axios' //引入axios
import qs from 'qs' //引入qs,用来序列化post类型的数据,否则后端无法接收到数据
// 设置post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.withCredentials = false;//在跨域请求时,不会携带用户凭证;返回的 response 里也会忽略 cookie

//创建axios实例,请求超时时间为300秒,因为项目中有多个域名,所以对应的也要创建多个axios实例
const instanceA = axios.create({
 timeout: 300000,
});
const instanceB = axios.create({
 timeout: 300000,
});

//如果项目为单一域名,这里可以不用进行配置,当项目接口有多个域名时,要对axios实例基础路径进行配置,否则在项目生产环境中无法进行区别调用
if (process.env.NODE_ENV == 'production') {
 instanceA.defaults.baseURL = 'https://www.production_a.com';
 instanceB.defaults.baseURL = 'https://www.production_b.com';
}

//请求和响应拦截可以根据实际项目需求进行编写
// 请求发起前拦截
instanceA.interceptors.request.use((config) => {
//这里可以对接口请求头进行操作 如:config.headers['X-Token'] = token
 console.log("请求拦截",config);
 return config;
}, (error) => {
 // Do something with request error
 return Promise.reject(error)
})
instanceB.interceptors.request.use((config) => {
 console.log("请求拦截",config);
 return config;
}, (error) => {
 // Do something with request error
 return Promise.reject(error)
})

// 响应拦截(请求返回后拦截)
instanceA.interceptors.response.use(response => {
 console.log("响应拦截",response);
 return response;
}, error => {
 console.log('catch', error)
 return Promise.reject(error)
})
instanceB.interceptors.response.use(response => {
 console.log("响应拦截",response);
 return response;
}, error => {
 console.log('catch', error)
 return Promise.reject(error)
})

//按照请求类型对axios进行封装
const api={
 get(url,data){
	return instanceA.get(url,{params:data})
 },
 post(url,data){
	return instanceA.post(url,qs.stringify(data))	
 },
 doGet(url,data){
	return instanceB.get(url,{params:data})
 },
 doPost(url,data){
	return instanceB.post(url,qs.stringify(data))	
 } 
}
export {api}

上述代码中有根据生产环境对axios实例的基础路径进行配置,如果项目中有多个环境(如:测试环境等),则需要对CLI4脚手架环境变量进行配置

api接口统一管理

将api接口按照功能模块进行拆分,把同一模块下的接口写在同一个文件中进行统一管理,这样代码会更容易维护。比如我们的项目中有新闻模块,音乐模块等。我们就在serviec目录中创建news.js、music.js文件,用于管理各自模块的所有api接口,这里我只拿news.js文件为例,代码如下:

import {api} from "./service.js";	
const news={
	getNewsList(){//获取新闻列表
		return api.get("api/news/getNewsList")
	},
	editNewsDetail(data){//修改新闻详情
		return api.post("api/news/editNewsDetail",data);
	}
}
export default news;

为了更方便在项目中调用这些封装好的接口,我们需要将这些接口挂载到vue的原型上,首先我们要在service目录中创建api.js文件,将所有模块的api管理文件引入进来,然后进行统一导出,代码如下:

//引入相关api管理模块
import news from "./news.js";
//进行统一导出
export default {
	news
}

找到项目中的main.js文件,将接口挂载到vue的原型上,代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
Vue.prototype.axios=axios
Vue.config.productionTip = false
import api from "./service/api.js";
//将封装的接口挂载到vue原型上
Vue.prototype.$api = api;
new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

然后我们在项目创建完成时自动生成的模板文件App.vue调用封装好的接口,代码如下:

<template>
 <div id="app">
 <div id="nav">
	<router-link to="/">Home</router-link> |
	<router-link to="/about">About</router-link>
	<button @click="getN">接口封装getN</button>
	<button @click="postN">接口封装postN</button>
 </div>
 <router-view/>
 </div>
</template>
<script>

export default {
	methods:{
		getN(){
			this.$api.news.getNewsList().then((res)=>{
				console.log(res);
			})
		},
		postN(){
			let openid="oO5tQ5VMPpuzLqwfXhpmwjqwSANM";
			let productCodes="pro-1337270496655446016";			
			this.$api.news.editNewsDetail({openid,productCodes}).then((res)=>{
				alert(res.data.msg);
			})
		}
	}	
}
</script>
<style lang="scss">
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}

#nav {
 padding: 30px;

 a {
 font-weight: bold;
 color: #2c3e50;

 &.router-link-exact-active {
  color: #42b983;
 }
 }
}
</style>

配置代理

因为我们要在本地环境进行测试,这就涉及到了跨域问题,为了解决跨域问题,我们可以进行代理的配置,在项目根目录中创建vue.config.js文件,然后可以对项目进行各种配置,代理的配置方法如下:

// vue.config.js
module.exports = {
 // 输出文件目录
 outputDir: "dist",
 // eslint-loader 是否在保存的时候检查
 lintOnSave: false,
 // 基本路径
 publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
 devServer: {
 host: "localhost",
 port: 8080,
 open: true,
 hotOnly: true, // 热更新
 // 设置代理
 proxy: {
  "/api": {
  // 本地mock服务器
  target: "https://www.xxxx.com/xxx/",
  changeOrigin: true,
  ws: false,				
  },
  //如果项目中存在多个域名接口,可依次进行配置
	"/apib":{
		target: "https://www.xxxx.com/xxx/",
		changeOrigin: true,
		ws: false,
	},
 }, 
 },
};

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

结语

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

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

Vue.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
Vue如何实现验证码输入交互
Dec 07 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
Vue 简单实现前端权限控制的示例
Dec 25 #Vue.js
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 #Vue.js
vue使用require.context实现动态注册路由
Dec 25 #Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 #Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 #Vue.js
vue 使用class创建和清除水印的示例代码
Dec 25 #Vue.js
基于vue+echarts数据可视化大屏展示的实现
Dec 25 #Vue.js
You might like
php class中public,private,protected的区别以及实例分析
2013/06/18 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
js中reverse函数的用法详解
2013/12/26 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
python字符串连接方法分析
2016/04/12 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
Python sqlite3事务处理方法实例分析
2017/06/19 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
python归并排序算法过程实例讲解
2020/11/04 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
酒店员工培训方案
2014/06/02 职场文书
人大调研汇报材料
2014/08/14 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
班主任自我评价范文
2015/03/11 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
Go语言安装并操作redis的go-redis库
2022/04/14 Golang