最近看了一个视频关于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>
以上就是全部的内容。