详解详解vue中中axios的使用与封装的使用与封装
主要介绍了vue中axios的使用与封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的
参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
分享下我自己的axios封装
axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理
当然首先是npm安装axios 很简单$ npm install axios --save
在src下新建文件夹 service / index.js
接着上代码
import axios from 'axios';
import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示
import router from '../router'
// 默认超时设置
axios.defaults.timeout = 50000;
// 相对路径设置
axios.defaults.baseURL ='';
//http request 拦截器
axios.interceptors.request.use(
config => {
// 获取token
const token = localStorage.getItem('cc_token');
// 设置参数格式
if(!config.headers['Content-Type']){
config.headers = {
'Content-Type':'application/json',
};
}
// 添加token到headers
if(token){
config.headers.token = token
}
// 鉴权参数设置
if(config.method === 'get'){
//get请求下 参数在params中,其他请求在data中
config.params = config.params || {};
let json = JSON.parse(JSON.stringify(config.params));
//一些参数处理
}else{
config.data = config.data || {};
//一些参数处理
}
return config;
},
err => {
return Promise.reject(err);
}
);
以上请求之前的一些处理就完成了
下面是获得返回的一些处理
//http response 拦截器
axios.interceptors.response.use(
response => {
//一些统一code的返回处理
if(response.data.code === 501){
// 登录验证
//做了个示例跳转项目中登录,并记录下相对路径
router.push({
name:'login',//从哪个页面跳转
query:{
retUrl:window.location.href.split('#')[1] || '',
is_new_user_url:1
}
})
}
return response;
},
error => {
return Promise.reject(error)
评论0