Vue.js axios响应拦截如何获取返回状态码
www.wenwen 人气:0axios响应拦截获取返回状态码方式整理
方法一
axios.interceptors.response.use( response => { console.log('拦截器响应成功') return response }, error => { console.log('拦截器响应失败') console.log(error) if(error.request){ console.log(error.request) } else if(error.response){ console.log(error.response.data); console.log(error.response.status); } if (error && error.response) { switch (error.response.status) { case 400: error.message = '请求错误(400)'; break; case 401: error.message = '未授权,请重新登录(401)'; break; case 403: error.message = '拒绝访问(403)'; break; case 404: error.message = '请求出错(404)'; break; case 408: error.message = '请求超时(408)'; break; case 500: error.message = '服务器错误(500)'; break; case 501: error.message = '服务未实现(501)'; break; case 502: error.message = '网络错误(502)'; break; case 503: error.message = '服务不可用(503)'; break; case 504: error.message = '网络超时(504)'; break; case 505: error.message = 'HTTP版本不受支持(505)'; break; default: error.message = '连接出错'(${error.response.status})!; } }else{ error.message ='连接服务器失败!' } return Promise.reject(error) } )
方法二
// request请求拦截器 axios.interceptors.request.use( config => { Indicator.open({ text: '加载中...', spinnerType: 'fading-circle' }); //如果cookie中存在Authorization if(sessionStorage.getItem('Authorization')){ config.headers.common['Authorization'] = sessionStorage.getItem('Authorization') config.headers.common['loginAuth'] = sessionStorage.getItem('loginAuth') } return config }, error => { Promise.reject(error) } ); //response响应拦截器 axios.interceptors.response.use( response => { if(sessionStorage.getItem('Authorization')){ // 返回code === 1 || 返回code === 2 if(response.data.code === 1){ MessageBox.alert(response.data.msg).then(action=>{}) }else if(response.data.code === 2){ MessageBox.alert(response.data.msg).then(action=>{ sessionStorage.removeItem('Authorization') router.push('/login') }) } } Indicator.close() //响应成功,关闭全局的Indicator return response }, error => { Indicator.close() // 响应错误,关闭全局的Indicator if(error){ const {response} = error if(response.status >= 400 && response.status < 500){ MessageBox.alert('资源不存在,请稍后重试').then(action=>{ }) }else if(response.status >= 500){ MessageBox.alert('服务异常,请稍后重试').then(action=>{ }) } if(response.data.message === 'Network Error'){ MessageBox.alert('网络异常,请稍后重试').then(action=>{ }) } } return Promise.reject(error) } );
方法三
// axios请求拦截器 // 每次发送axios请求,都要带上一个token axios.defaults.timeout = 120000 // 设置默认timeout为2分钟 axios.interceptors.request.use( config => { config.headers['Content-Type'] = 'application/json; charset=UTF-8' config.headers['Cache-Control'] = 'no-catch' const token = window.localStorage.getItem('accesstoken') if (token) { config.headers.common['access-token'] = `${token}` } return config }, err => { console.log(err) return Promise.reject(err) } ) axios.interceptors.response.use( response => { const tokentimer = Number(window.localStorage.getItem('tokentimer')) const tokenTimerStamp = Number(response.headers['token-timestamp']) /* 时间戳比之前时间戳大的时候替换token */ if (tokentimer < tokenTimerStamp) { window.localStorage.setItem('accesstoken', response.headers['access-token']) window.localStorage.setItem('tokentimer', response.headers['token-timestamp']) } if (response.status === 200) { // 导出成功不返回下面的字段 let _isTrue = response.data.success // 返回成功 let _message = response.data.message // 返回提示信息 let codeNum = response.data.code let _code, _code3 if (codeNum) { _code = codeNum.toString().slice(0, 1) // 返回失败 _code3 = codeNum.toString().slice(0, 4) } else { // 排除导出时成功没有返回code 导致报错 if (response.data.code) { Vue.prototype.$message({ message: `${codeNum}请求异常,请联系管理员!`, type: 'error' }) } } if (_isTrue && codeNum === 20000) { // 返回成功请求 } else { if (_code === '2' && codeNum !== 20000) { Vue.prototype.$message({ message: `${codeNum}:${_message}`, type: 'error' }) } else if (_code === '5' || _code === '6') { // 状态码为5,6开头的为服务器错误 Vue.prototype.$message({ dangerouslyUseHTMLString: true, message: `${codeNum}:${_message}`, type: 'error' }) } else if (_code === '4') { // 状态码为4开头的为权限问题,无法登录 if (_code3 === '4032') { router.push('/login') } else { Vue.prototype.$message({ message: `${codeNum}:${_message}`, type: 'error' }) } } } return Promise.resolve(response) } return Promise.reject(response) }, error => { if (error.response) { Vue.prototype.$message({ message: '系统异常,请联系管理员!', type: 'error' }) } else { Vue.prototype.$message({ message: '网络不给力', type: 'error' }) } return Promise.reject(error) // 返回接口返回的错误信息 })
Vue的axios拦截器用法
1.1 介绍:
拦截器包括请求拦截器与相应拦截器,可以在请求发送前或者相应后进行拦截处理。在axios对象上有一个interceptors属性,该属性又有request和response两个属性。axios.interceptors.request和axios.interceptors.response对象提供了use方法,分类设置请求拦截器与响应拦截器。
use()方法支持两个参数,第一个参数是类似于Promise的resolve函数,第二个参数是类似于Promise的reject函数。我们可以在resolve或者reject函数中执行同步或是异步打代码逻辑。
根据官网介绍,其用法如下:
//2.1 请求拦截器 axios.interceptors.request.use( function (config) { //在请求之前做些什么 return config }, function (error) { //对请求错误做些什么 return Promise.reject(error) } ) //2.2 响应拦截器 axios.interceptors.response.use( function (response) { //对响应数据做点什么 return response }, function (error) { //对响应错误做点什么 return Promise.reject(error) } )
1.2 应用场景
比如你在项目中的请求发送是都需要携带token值得,那么我们便可以巧妙的利用axios的请求拦截技术,使得我们只需要在这里拦截,判断是否登录即token值是否存在,存在则放行请求,不存在的话根据项目需求跳转到相应的页面(一般是登录页面)去获取token值再放行登录,举例如下:
1. 在src目录的api目录下创建一个axios.js文件
import axios from 'axios' import store from '@/store/index' //引入store import router from '@/router' //引入router //第一步创建实例 //全局axios默认值 //1.可以使用axios.defaulys的方式 2.可以使用axios.create()的方式,以下使用方式2 //方式1 // axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1/" // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; //方式2 let instance = axios.create({ headers: { 'content-type': 'application/x-www-form-urlencoded' } }) //第二步 设置拦截器 //2.1 请求拦截器 instance.interceptors.request.use( function (config) { let access_token = sessionStorage.getItem('access_token'); //如果不存在字段,则跳转到登录页面 if (!access_token) { router.push({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) //终止这个请求 return Promise.reject(); } else { //token存在,则让每个请求头都加上这个token,后台会判断我这个token是否过期 config.headers.Authorization = access_token; //token放在请求头那个字段根据后端而定 } //到了这一步就是循序发送请求 return config; }, function (error) { //对请求错误做些什么 // err为错误对象,但是在我的项目中,除非网络问题才会出现 Message.error({ message: '请求超时!' }) return Promise.reject(error); }) //2.2 响应拦截器 // http response 拦截器 instance.interceptors.response.use( response => { // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response); } else { return Promise.reject(response); } }, // 服务器状态码不是2开头的的情况 // 这里可以跟你们的后台开发人员协商好统一的错误状态码 // 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等 // 下面列举几个常见的操作,其他需求可自行扩展 error => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面,并携带当前页面的路径 // 在登录成功后返回当前页面,这一步需要在登录页操作。 case 401: vant.Toast.fail("身份验证失败,请关闭重新进入。"); break; // 403 token过期 // 登录过期对用户进行提示 // 清除本地token和清空vuex中token对象 // 跳转登录页面 case 403: vant.Toast.fail("登录过期,请关闭重新进入。"); // 清除token break; // 404请求不存在 case 404: vant.Toast.fail("您访问的网页不存在。"); break; // 其他错误,直接抛出错误提示 default: vant.Toast.fail(error.response.data.message); } return Promise.reject(error.response); } } ); //最后将实例导出来 export default instance
2.在main.js中导入并挂载在Vue上
import instance from "./axios-init";//导入 //把axios 作为Vue的原型属性 window.axios = axiosInit(); Vue.prototype.$http = window.axios;//挂载
3.在页面中使用
this.$http.post(url, params).then(res=>{}).catch(error=>{});
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容