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实现坐标拾取器功能示例
Nov 18 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
Vue2.0搭建脚手架
Mar 13 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
ant design vue的form表单取值方法
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
How do I change MySQL timezone?
2008/03/26 PHP
PHP return语句的另一个作用
2014/07/30 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
jquery.jstree 增加节点的双击事件代码
2010/07/27 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
js判断生效时间不得大于失效时间的思路及代码
2013/04/23 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
vue 组件简介
2020/07/31 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
Python with的用法
2014/08/22 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
基于python实现简单日历
2018/07/28 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
python 模拟登陆github的示例
2020/12/04 Python
CSS3实现可关闭的下拉手风琴菜单效果
2015/08/31 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
慈善捐赠倡议书
2014/08/30 职场文书
2015年个人实习工作总结
2014/12/12 职场文书