在axios的请求上使用请求拦截,和响应后处理的方式一个封装处理
首先需要引入使用axios
在发出请求响应之前做技术处理(参数进行验证=>例如登录token数据参数发起请求是判断是否存在)
import axios from 'axios'
封装固定参数配置,再实现请求拦截
const Axios = axios.create({
timeout:5000,
baseUrl:'/apis'
})
在发起请求前做一个拦截,主要是做请求参数处理 需要返回数据数据再继续发出请求
Axios.interceptors.request.use(function(config){
console.log(config)
//模拟token数据 请求是否存在来判断是否发送请求
let token='token'
//定义数组请求地址,不要拦截的地址进行定义,过滤请求地址使用拦截
let otherPath=['/user/app/code','/user/app/login']
//使用includes判断是否包含上面的地址就不要拦截(登录不要拦截,并加上加工的数据返回)
if(otherPath.includes(config.url)){
return config
}else{
//如果需要拦截,就对token进行校验不存在返回错误
if(!token){
return Promise.reject({code:400.message:'当前用户没有登录,所以就不能发出异步请求'})
}else{
//可以对config数据进行加工在头部,添加上token数据
//直接返回发出请求
return config
}
}
})
axios响应之后进行拦截处理:=>(这里对用户进行响应之后的身份是否正确验证进行,设置token失效)
Axios.interceptors.response.use(function(response){
//函数可以打印arguments
//判断返回是否是403,是则抛出异常,中断请求,提示token失效,重新登录
if(response,data.code ===403){
//throw new TypeError('用户token失效')
return Promise.reject('用户token失效')
}else{
//正常业务直接返回对象
return response
}
})
axios请求函数封装:(主要配置 url地址,延时时效,请求方法,请求体参数,)
//调用时传参
function ajaxFunc(req){
//判断url地址是否传递,--JS是主线程运行应用,所以可以使用异常抛出直接中断当前的线程
if(!req.url){
throw new SystaxError('请求的url参数是必传的')
}
return new Promise(resolve=>{
//发送请求实例对象axios.request
Axios.request({
//设置请求地址
url:req.url,
method:req.method || 'GET'
//params参数配置 -- 它的参数会自动拼接到url地址上
params:req.params || {},
//data参数 -- 不要在get请求中使用,它是请求体参数
data:req.data ||{},
//}).then(data=>{
//请求返回一个是response对象,希望得到数据
}).then(({data})=>{
//可以对response对象进行解构赋值
//返回数据
resolve(data)
}).catch(e=>{
console.log('----请求失败')
resolve(e)
})
})
}
export default ajaxFunc
对封装的axios请求进行接口调用: api数据接口调用=>引入单个导入请求方法接口函数,使用async+await来进行同步接收处理数据
//接口调用实例
//对所有的登录接口进行封装,只接收参数,然后返回请求结果,所有的接口都应该单独导出
//引入封装后的axios请求的方法
import AJax from './Ajax'
//单独导出一个获取验证码的接口 ,调用这个方法时这里传入参数
export function getVdtCodeApi(phone){
//返回一个Promise回去
return Ajax({
url:'/user/app/code',
//params接收的是一个对象
//params{phone:phone}
params:{phone}
})
}
//动态接口传递参数值:/user/:id 文档形式,/user/{id} swagger形式
//在使用的时候,需要把:id或则是{id} 替换为需要传递的参数值
export function getUserInfoApi(id){
return Ajax({
// url:'/user/' + id
url:`/user/${id}`
})
}
在页面请求数据时需要引入上面的接口调用返回结果:
<script>
import { getUserInfoApi,getVdtCodeApi} from '../../apis/loginApi'
//这里是vue的实例
export default{
data(){
return{
welcome:true,
welText:[][new Date().getMonth()],
remember:false,
auto:false,
loginObj:{
phone:'',
code:''
},
//欢迎页面定时器
timer:null,
time:5,
currentTime:100,
//免登录标识
autoFlag:'login'
}
},
//在用户进入系统的时候,开始获取缓存,根据缓存不同走不同的业务
created(){
//欢迎页面需要一个倒计时
this.timer = setInterval(()=>{
if(this.currentTime >0){
this.currentTime -=1
this.time = Math.ceil(this.currentTime / 20)
}else{
//倒计时到了,就需要把欢迎页面关闭
this.welcome = false
}
},50)
//读取免登录缓存 -- auto-text
let autoText = localStorage.getItem('auto-text')
//如果有缓存则发送自动登录接口
if(!!autoText){
//自动登录业务
setTimeout(()=>{
this.autoFlag = 'succes'
},2000)
}else{
//读取手机号缓存
let userPhone = localStorage.getItem('user-phone')
//如果手机号存在 -- 给登录的数据phone赋值并且要把记住手机号的标识指为真
if(!!userPhone){
this.loginObj.phone = userPhone
this.remember = true
}
//设置免登录失败
this.autoFlag = 'error'
}
},
methods:{
//倒计时关闭
//如果免登录成功了,应该进入到首页,否则停留在登录页面
//如果免登陆接口没有完成请求,用户点击不能生效 --需要有一个标识,表示免登陆已经结束,并且要告诉我免登录的结果
// autoFlag =免登录进行中 login、登录成功 success、登录失败 error
closeWelcome(){
//免登录进行中 -- 不执行任何业务
if(this.autoFlag === 'login') return
//只要免登录完成以后都需要关闭定时器
clearInterval(this.timer)
//登录成功
if(this.autoFlag === 'success'){
//路由跳转页面的优点,全局引入后不用再去引入,直接使用方法进行跳转
this.$router.push('./home')
}else{
this.welcome=false
}
},
async loginEvt(){
let result =awit getUserInfoApi()
console.log('打印请求的数据',result)
}
}
}
</script>