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

在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-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’ //引入axiosimport 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接口按照功能模块进行拆分，把同一模块下的接口写在同一个文件中进行统一管理，这样代码会更容易维护。比如我们的项目中有新闻模块，音乐模块等。我们就在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=axiosVue.config.productionTip = falseimport 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.jsmodule.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的资料请关注好吧啦网其它相关文章！