Vue2中axios封装(超级详细,拿到手直接用)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
封装的axios.js文件
/**
* 全站http配置
*
* axios参数说明
* isSerialize是否开启form表单提交
* isToken是否需要token
*/
import axios from 'axios';
import store from '@/store/';
import router from '@/router/router';
import {serialize} from '@/util/util';
import {getToken} from '@/util/auth';
import {Message} from 'element-ui';
import website from '@/config/website';
import {Base64} from 'js-base64';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
//默认超时时间
axios.defaults.timeout = 120000;
//返回其他状态码
axios.defaults.validateStatus = function (status) {
return status >= 200 && status <= 500;
};
//跨域请求,允许保存cookie
// axios.defaults.withCredentials = true;
// NProgress 配置
NProgress.configure({
showSpinner: false
});
//http request拦截
axios.interceptors.request.use(config => {
//开启 progress bar
// NProgress.start();
const meta = (config.meta || {});
const isToken = meta.isToken === false;
config.headers['Authorization'] = `Basic ${Base64.encode(`${website.clientId}:${website.clientSecret}`)}`;
//让每个请求携带token
if (getToken() && !isToken) {
config.headers[website.tokenHeader] = 'bearer ' + getToken()
}
//headers中配置text请求
if (config.text === true) {
config.headers["Content-Type"] = "text/plain";
}
//headers中配置serialize为true开启序列化
if (config.method === 'post' && meta.isSerialize === true) {
config.data = serialize(config.data);
}
return config
}, error => {
return Promise.reject(error)
});
//http response 拦截
axios.interceptors.response.use(res => {
//关闭 progress bar
// NProgress.done();
//获取状态码
const status = res.status;
const statusWhiteList = website.statusWhiteList || [];
const message = res.data.msg || res.data.error_description || '未知错误';
//如果在白名单里则自行catch逻辑处理
if (statusWhiteList.includes(status)) return Promise.reject(res);
//如果是401则跳转到登录页面
if (status === 401) {
router.replace({path: '/login'});
}
// 如果请求为非200否者默认统一处理
if (status !== 200 && status !== 401) {
Message({
message: message,
type: 'error'
});
return Promise.reject(new Error(message))
}
// if(status === 401){
// Message.closeAll()
// Message({
// showClose: true,
// message: message,
// type: 'error'
// });
// }
return res;
}, error => {
// NProgress.done();
if(error.message.includes('timeout')){
Message({
message: '网络响应过慢,请刷新重试!',
type: 'error'
});
return Promise.reject(new Error(error));
} else {
return Promise.reject(new Error(error));
}
});
export default axios;
2.serialize方法如下:
export const serialize = data => {
let list = [];
Object.keys(data).forEach(ele => {
list.push(`${ele}=${data[ele]}`)
})
return list.join('&');
};
3.getToken方法如下:
import Cookies from 'js-cookie'
const TokenKey = 'saber-access-token'
const RefreshTokenKey = 'saber-refresh-token'
export function getToken() {
return Cookies.get(TokenKey)
}
好啦,这就封装好了,去使用吧!
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献3条内容
所有评论(0)