vue中axios的封装和请求

最近看了一个视频关于axios的封装和请求的，感觉封装的模式和写法都不错。在这里展现出来。如果有更好的可以自行发挥。

这边是以vue的代码结构来写的，具体如下：

1、在src里面新建api文件夹，api文件夹里面新建一个http.js，用来封装axios的。http.js的代码如下：

import axios from 'axios';
import qs from 'qs';
import Cookie from 'js-cookie'; // 引入cookie作为缓存

/*
 * 根据环境变量区分接口的默认地址
 */
switch(process.env.NODE_ENV){
	case "production":
		axios.defaults.baseURL = "https://test.xxxx.com"; // 生产环境地址
		break;
	default:
		axios.defaults.baseURL = "http://127.0.0.0"; // 默认走开发环境
}

/*
 * 设置超时时间和跨域是否携带凭证
 */
axios.defaults.timeout = 10000;
axios.defaults.widthCredentials = true;

/*
 * 设置请求传递的数据格式
 */
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data);

/*
 * 请求拦截器
 * 客户端发送请求 -> [请求拦截器] -> 服务器
 * token校验：接受服务器返回的token，存储到vuex/本地存储，每一次向服务器发送请求，我们应该把token带上
 */
axios.interceptors.request.use(config => {
	// 携带上token
	let token = Cookie.get('token');
	token && (config.headers.Authorization = token);
	return config; // 必须要返回config，不然发送服务器的就是空的undefined
},error => {
	return Promise.reject(error);
});

/*
 * 响应拦截器
 * 服务器信息 -> [拦截的统一处理] -> 客户端js获取到信息
 */
axios.interceptors.response.use(response => {
	return response.data;
}, error => {
	let {response} = error;
	if(response) {
		// 服务器返回了结果
		switch(response.status) {
			case 401: // 权限问题
				console.log('跳转登录页面...');
				break;
			case 403: // token过期
				console.log('跳转登录页面...');
				break;
			case 404: // 找不到地址
				console.log('当前页面不存在，可以跳转到404页面...');
				break;
		}
	}else{
		// 服务器没返回结果（服务器崩了、断网了）
		if(!window.navigator.onLine){
			console.log('断网了...') // 可以自定义回调处理
			return;
		}
		return Promise.reject(error);
	}
});

export default axios;

2、数据请求是按模块分类的。这里所建的js都是测试，具体命名大家可以自行修改。

3、在api文件里面新建一个登陆的login.js，用来写请求的接口地址以及登陆的所有相关的逻辑。login.js的代码如下：

import axios from './http.js';

// 登录接口
function login(params){
	return axios.post('/Api/login',params)
}

export default {
	login
}

4、再新建一个其他模块的请求js接口，这里再api文件里面新建一个otherModule.js。otherModule.js的代码如下：

import axios from './http.js';

// 首页接口
function index(params){
	return axios.post('/Api/index',params)
}

export default {
	index
}

5、这里再建一个统一的请求入口存放接口，在api文件夹里面新建api.js。api.js的代码如下：

/*
 * 这是数据请求的唯一接口
 */
 import login from './login.js';
 import index from './otherModule.js'; 
 
 export default {
	login,
	index
 }

6、为了方便调用，在main.js里面写入以下代码：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import api from './api/api.js'  // 引入api.js

Vue.config.productionTip = false;
Vue.prototype.$api = api;  // 定义全局使用

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

7、在页面里面的引用，代码如下：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" @click="test()">
  </div>
</template>

<script>
export default {
    methods:{
                // 测试封装的axios的登录方法
		test(){
			const postData = {
				mobile: '',
				password: '',
			}
			this.$api.login.login(postData).then(res => {
				console.log(postData);
				console.log(res)
			})
		}
	}
}
</script>

以上就是全部的内容。