一、为什么使用axios?(响应拦截,请求,异步封装配置)
它是基于xhr的请求封装的引进优化的一个请求库,
这个库是使用Promise实现的一个XHR封装、它可以实现请求和响应拦截,同时可以实现通用的配置(封装axios请求)
//在apis文件夹写建立封装的Ajax文件 //引入axios import axios from 'axios' //可以实现把固定的参数进行一个封装,然后再实现请求拦截 //created方法接收一个请求配置对象,返回一个实例 const Axios =axios.create({ timeout:5000, baseURL:'/apis', }) //可以使用实例的拦截属性来进行请求拦截 -- 发起请求之前,请求响应之后 //请求之前做一个拦截 //函数会把请求参数全部传参进来,我们可以对这个参数做处理 //请求前的拦截,需要返回数据,才会继续发出请求 Axios.inteceptors.request.use(function(config){ console.log(config) //如果token不存在则直接抛出一个错误,然后结束请求,不然发不出请求 //模拟有token数据 let token='aaaa' let otherPath =['/user/app/code','/user/app/login'] //如果请求地址包含在排除地址中,那么这个请求就不要拦截 if(otherPath.includes(config.url)){ return config }else{ //如果需要拦截,则需要对token进行校验 //不存在,直接返回一个错误信息 if(!token){ return Promise.reject({code:400,message:'当前用户没有登录,所以不能发出异步请求'}) }else{ //可以对config数据进行加工,添加上token数据 config.headers.token=token //直接发出请求 return config } } }) //响应之后 -- 需要使用use方法来注册一个钩子函数,用于axios在完成请求之后来执行业务处理方法 //use 需要传递一个函数,这通用业务的一个拦截处理 个函数要求返回一个Promise或则是一个对象(Promise | any) //函数会有一个响应对象形参,然后可以通过对形参的data对象处理,实现一个拦截处理 Axios.interceptors.response.use(function(response){ //判断后端返回的状态码是否是403,如果是403,直接抛出一个异常,中断请求,然后提示用户token失效,需要重新登录 if(response.data.code === 403){ //throw new TypeError('用户的token错误或已失效,需要用户重新登录获取新的token') }else{ //正常的业务直接返回对象 return response } }) //封装一个ajax请求方法 function ajaxFunc(req){ //如果url地址没有传递,直接报错 --JS是主线程运行应用,所以可以使用异常抛出中断当前的现程 if(!req.url){ throw new SyntaxError('请求的url参数是必传的') } return new Promise(resolve=>{ //把动态数据url,method,params,data抽取出来 //应该用封装后的一个请求实例对象 //axios.request({ //设置请求地址 url:req.url, method:req.method || 'GET', //params参数配置 -- 它的参数会自动拼接到url地址上 params:req.params || {}, //data参数 -- 不能在get请求中使用,它是请求体参数 data:req.data ||{} // }).then(data=>{ //请求返回的是一个response对象,希望得到数据 //console.log(data.data) }).then(({data})=>{ //可以对response对象进行结构取值 //返回数据 resolve(data) }).catch(e=>{ console.log('-----请求失败') resolve(e) }) }) } export defalut ajaxFunc
封装一个公共axios请求,是为方便其他的接口来请求调用
//对所有的登录接口进行封装,只接收参数,然后返回请求结果,所有的接口都应该单独导出 //引入封装后的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}` }) }
在组件页面调用接口数据:(首先在js里引入然后在methods里使用async/awiat同步操作进行数据获取)
<script> import {getUserInfoApi,getVdtCodeApi} from '../../apis/loginApi' export defalut{ data(){ return{ value:'' } } methods:{ //获取验证码请求接口的方法 async getVdtCode(){ let result = awiat getVdtCodeApi('18982739') console.log(result) } } } </script>