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+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
Vue看了就会的8个小技巧
Jan 21 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue中控制mock在开发环境使用,在生产环境禁用方式
Apr 06 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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
Zend Guard一些常见问题解答
2008/09/11 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
关于js datetime的那点事
2011/11/15 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
JavaScript立即执行函数的三种不同写法
2014/09/05 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
JS 对java返回的json格式的数据处理方法
2016/12/05 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
ES6如何用一句代码实现函数的柯里化
2020/01/18 Javascript
JS图片预加载三种实现方法解析
2020/05/08 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python3实现汉语转换为汉语拼音
2019/07/08 Python
将python安装信息加入注册表的示例
2019/11/20 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
日本民宿预约平台:STAY JAPAN
2017/07/01 全球购物
事业单位鉴定材料
2014/05/25 职场文书
物资采购方案
2014/06/12 职场文书
幼儿园植树节活动总结
2014/07/04 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
关于倡议书的范文
2015/04/29 职场文书
Vue CLI中模式与环境变量的深入详解
2021/05/30 Vue.js
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server
MySQL数据库之存储过程 procedure
2022/06/16 MySQL