基于axios的请求拦截和响应处理技术封装

在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>