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

#创作灵感来自前端Vue接口数据#

简单介绍下axios：

axios是一个基于Promise的HTTP库，可以用于浏览器和Node.js环境中发送HTTP请求。它具有以下特点：

1. 支持Promise API：axios使用Promise来处理异步操作，使代码更加简洁和可读性更强。
2. 支持浏览器和Node.js环境：axios可以在浏览器和Node.js环境中使用，兼容性很好。
3. 提供了丰富的功能：axios支持对请求和响应进行拦截、转换、取消等操作，还支持自定义的请求头和响应类型等。
4. 支持并发请求：可以同时发送多个并发请求，并且可以对请求结果进行统一处理。
5. 提供了简洁的API：axios提供了一系列简洁且易用的API，使发送请求变得更加简单和方便。

在Vue中使用axios可以通过安装axios库并引入，然后在Vue组件中使用axios发送HTTP请求来获取数据或与后端进行交互。通过使用axios，我们可以更方便、高效地处理HTTP请求，并且可以与Vue的生命周期钩子函数配合使用，实现更好的用户体验。

一、首先，需要安装axios和vue-axios

在终端执行下面的命令进行安装

npm install axios vue-axios --save
 

二、模块引入

在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}

三、接下来，在main.js中引入vue-axios，并将axios挂载到Vue实例上，以便全局使用

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
 

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

javascript
复制代码
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')

四、最后，在组件中使用封装好的API接口，在项目创建完成时自动生成的模板文件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>

import api from './api.js'

export default {
  methods: {
    fetchData() {
      api.get('/data', { param1: 'value1', param2: 'value2' })
        .then(response => {
          // 处理响应数据
        })
        .catch(error => {
          // 处理错误
        })
    }
  }
}
 

五、在Vue项目中，可以使用axios库进行请求，并通过配置代理来处理接口请求的跨域问题。在项目根目录中创建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,
	},
    }, 
  },
};

在上述代码中，我们创建了一个axios实例，并设置了baseURL为/api，这样请求时会自动拼接在/api后面，例如请求/getData会变成/api/getData。这个baseURL需要和后端接口的路由前缀保持一致。

六、接下来，可以在api.js中定义具体的接口请求函数，例如：

// src/api/api.js

import axios from 'axios';

const api = axios.create({
  baseURL: '/api',
  timeout: 5000
});

export function getData() {
  return api.get('/getData');
}

export function postData(data) {
  return api.post('/postData', data);
}
 

这样就定义了两个接口请求函数，分别是getData和postData。

然后在Vue组件中可以直接调用这些接口请求函数，例如：

// src/views/Home.vue

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p v-if="data">{{ data }}</p>
    <form @submit.prevent="submitData">
      <input type="text" v-model="formData">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
import { getData, postData } from '../api/api';

export default {
  data() {
    return {
      data: '',
      formData: ''
    };
  },
  methods: {
    fetchData() {
      getData().then(response => {
        this.data = response.data;
      }).catch(error => {
        console.log(error);
      });
    },
    submitData() {
      postData({ data: this.formData }).then(response => {
        console.log(response);
      }).catch(error => {
        console.log(error);
      });
    }
  }
};
</script>
 

在该组件中，我们导入了getData和postData函数，并在按钮点击事件和表单提交事件中调用这些函数来进行接口请求。

最后，我们需要配置代理来解决跨域问题。在Vue项目的根目录下的vue.config.js文件中添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 将/api开头的请求代理到target配置的地址上
        ws: true, // 是否代理websockets
        changeOrigin: true
      }
    }
  }
};
 

这样配置之后，所有以/api开头的请求会被代理到http://localhost:8080上。需要注意的是，target的地址需要和后端接口的地址保持一致。

配置完成后，重新启动开发服务器，就可以在开发环境中正常进行接口请求了。

总结：通过封装Axios和统一管理API接口，可以使得代码结构更加清晰和易于维护，同时还可以提供更好的错误处理和请求配置。这种方法也可以方便地配合Vuex进行状态管理。