基于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}`
})
}

在页面请求数据时需要引入上面的接口调用返回结果：