杰网资源

vue中封装axios并实现api接口的统一管理
网络编程 2024/12/28 佚名
3 2
杰网资源 Design By www.escxy.com

在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,封装axios,vue,api接口管理
杰网资源 Design By www.escxy.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
杰网资源 Design By www.escxy.com
www.escxy.com 杰网资源
143,552互联网资源
19,717高清电影
44,608技术教程
44,608站长资源

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
杰网资源 Design By www.escxy.com
Copyright © 2006~2021 杰网资源   Design by www.escxy.com  杰晶网络提供技术支持