axios实现类似form传值的格式,以及实现拦截器功能,response拦截实现权限判断
import axios from 'axios' import Qs from 'qs' // 超时设置 const service = axios.create({ transformRequest: [function (data) { data = Qs.stringify(data); return data; }], // 请求超时时间 timeout: 5000 , }); //对,就是用qs对aixos进行全局设置,之后在首页引入这个封装好的aixos就好了,传给后台都是类似form的形式
2、这里补充一下,用拦截器给请求头加token // http request 拦截器 // 每次请求都为http头增加Authorization字段,其内容为token service.interceptors.request.use( config => { let cancel config.cancelToken = new CancelToken(function executor(c) { cancel = c; }) var token = Cookies.get('token'); config.headers.token = token if(token != undefined){ Auth.setLoginStatus() } stopRepeatRequest(config.url, cancel) return config }, err => { return Promise.reject(err); } );
3、针对返回来的数据进行拦截,这里进行权限判断,没权限或者页面不对,就跳到404 // http response 拦截器 // 针对响应代码确认跳转到对应页面 service.interceptors.response.use( response => { for( let i = 0; i < requestList.length; i++){ if(requestList[i] == response.config.url){ // 注意,不能保证500ms必定执行,详情请了解JS的异步机制 requestList.splice(i,1) //异步删除有问题 // setTimeout(function(){ // requestList.splice(i,1) // console.log(requestList,'执行删除了=================') // }, 100) break } } return Promise.resolve(response.data) }, error => { if(axios.isCancel(error)){ return Promise.reject("Ajax Abort: 该请求在axios拦截器中被中断") } else if (error.response) { switch (error.response.status) { case 401: router.push('error/401'); case 403: router.push('error/403'); default: Message({ message: `服务器错误!错误代码:${error.response.status}`, type: 'error' }) } return Promise.reject(error.response.data) } } );