axios请求拦截器、响应拦截器、接口API及使用
在request.js中,设置axios请求拦截器、响应拦截器,对应设置get、post请求公共方法;方便接口管理,所有请求接口统一整理编写在api.js中。src/api/request.js// import Vue from 'vue';import axios from 'axios';import VueAxios from 'vue-axios';// Vue.use(VueAxios
·
在request.js中,设置axios请求拦截器、响应拦截器,对应设置get、post请求公共方法;
方便接口管理,所有请求接口统一整理编写在api.js中。
src/api/request.js
// import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
// Vue.use(VueAxios , axios);
import { Toast , Dialog } from 'vant';
import router from '@/router';
// 全局设置axios发送cookie(axios 默认不发送cookie)
// axios.defaults.withCredentials = true;
// 创建 axios 实例
const instance = axios.create({
baseURL : process.env.BASE_API,
timeout : 5000,
headers : {
// 'Content-Type' : 'application/x-www-form-urlencoded', // Form Data
'Content-Type' : 'application/json', // Request Payload
},
withCredentials: true // 允许携带cookie
});
// 添加请求拦截器
instance.interceptors.request.use((config)=>{
// 发送请求前做些什么
// config.headers.xxx = 'xxx';
return config;
},(error)=>{
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use((response)=>{
// console.log(response.data);
// console.log(response.status);
// console.log(response.statusText);
// console.log(response.headers);
// console.log(response.config);
// 对响应数据做些什么
if(response.data.status == '1002'){
// 1002 跳转登录
setTimeout(()=>{
// Toast('请登录');
Toast(response.data.message);
},100);
router.push('/login');
return false;
}else if(response.data.status == '1003'){
// 1003 个人信息(补全信息)
setTimeout(()=>{
// Toast('请补全个人信息');
Toast(response.data.message);
},100);
router.push('/userInfo');
return false;
}else{
return response;
}
},(error)=>{
// 对响应错误做些什么
Dialog({ message: '系统繁忙,请刷新重试' });
return Promise.reject(error);
});
// export default instance;
// url : 请求URL
// data : 后台接收数据,取值:{id:1,...} 或 {}
// loadingText : 是否需要请求的loading提示,取值:用户传递的值如:'加载中...' 或 ''
// failDialog : 是否需要显示处理失败 response.data.status==0 的提示,取值:1 或 0
// successToast : 是否需要显示处理成功 response.data.status==1 的提示,取值:1 或 0
const request = {
// get 请求
get:function(url,data,loadingText,failDialog,successToast){
loadingText && Toast.loading({duration: 0,message: loadingText,forbidClick: true,});
data = data || {};
return instance.get(url,{params:data}).then(response=>{
if(!response){
return false;
}
// return Promise.resolve(response.data);
loadingText && (!successToast || response.data.status == 0) && Toast.clear();
response.data.status == 0 && failDialog && Dialog({ message: response.data.message });
response.data.status == 1 && successToast && Toast.success(response.data.data);
return response.data;
}).catch(error=>{
loadingText && Toast.clear();
return Promise.reject(error);
})
},
// post 请求
post:function(url,data,loadingText,failDialog,successToast){
loadingText && Toast.loading({duration: 0,message: loadingText,forbidClick: true,});
data = data || {};
return instance.post(url,data).then(response=>{
if(!response){
return false;
}
// return Promise.resolve(response.data);
loadingText && (!successToast || response.data.status == 0) && Toast.clear();
response.data.status == 0 && failDialog && Dialog({ message: response.data.message });
response.data.status == 1 && successToast && Toast.success(response.data.data);
return response.data;
}).catch(error=>{
loadingText && Toast.clear();
return Promise.reject(error);
})
}
}
export default request;
baseURL配置:
config/dev.env.js
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
// BASE_API: '"http://xxx.com/perform-system/"'
BASE_API: '"/perform-system/"'
})
config/prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"production"',
// BASE_API: '"http://xxx.com/perform-system/"'
BASE_API: '"/perform-system/"'
}
config/index.js
// 代理
...
proxyTable: {
'/perform-system/': {
target: 'http://xxx.com/', //后端接口地址
changeOrigin: true, //是否允许跨越
pathRewrite: {
'^/perform-system/': '/perform-system/', //重写,
}
}
},
...
src/api/api.js
import request from '@/api/request.js';
// 登录-发送验证码
function sendSms(data){
return request.post('sendSms',data,'发送中...',1,1);
}
// 登录-提交登录信息
function login(data){
return request.post('login',data,'登录中...',1,1);
}
// 获取用户基本信息-判断身份/个人消息数据
function userData(){
return request.post('userInfo',{},'',0,0);
}
...
export { sendSms , login , userData };
login.vue中
import { sendSms , login } from '@/api/api.js';
...
//获取验证码
let dataJson = {
name: this.name,
mobile: this.mobile,
};
sendSms(dataJson).then(res=>{
console.log(res);
if(res.status == 1){
this.countDown(); //执行倒计时
this.countdown = true;
this.ifSendSmsOk = true;
}
}).catch(err=>{
console.log(err);
})
...
...
//执行登录
let dataJson = {
name: this.name,
mobile: this.mobile,
code: this.code,
};
login(dataJson).then(res=>{
console.log(res);
if(res.status == 1){
this.$router.push('/');
}
}).catch(err=>{
console.log(err);
})
...
更多推荐
已为社区贡献3条内容
所有评论(0)