nuxt使用axios配置拦截器

20 篇文章 0 订阅
第一步:安装axios npm
npm i @nuxtjs/axios
第二步:配置 nuxt.config.js

在这里插入图片描述

    modules: [        
    	'@nuxtjs/axios',    
    ],    
    axios: {        
    	prefix: 'http://127.0.0.1:8185/api/',        
    	proxy: true    
   },
第三步:创建axios.js

在这里插入图片描述

第四步:拦截

4-1:这种是官方推荐的方式 文档地址
在这里插入图片描述
这种方式好像无法对数据进行拦截

    $axios.onRequest(config => {      
    	console.log('Making request to ' + config.url)    
    })    
    $axios.onResponse(response => {          
    	if(response.data.success == false){            
    		console.log("请求失败");            
    		return;          
    	}          
    	console.log(response);                    
    	return response    
    })    
    $axios.onError(error => {      
    	const code = parseInt(error.response && error.response.status)      
    	console.log(code)      
    	if(code != 200){          
    		console.log(code)               
    	 }    
    })

4-2:网上找到的一种方法,可以对数据进行拦截

在这里插入图片描述

export default function ({ $axios, redirect }) {    
	$axios.interceptors.response.use(response => {      
		if(response.data.success == false){        
			console.log("请求失败");        
			return;      
		}      
		console.log(response);            
		return response    
	}, err => {      
		if (err && err.response) {         
			switch (err.response.status) {              
				case 400: err.message = '请求错误(400)'; break;              
				case 401: return history.push('/login'); break;              
				case 403: err.message = '拒绝访问(403)'; break;              
				case 404: err.message = '请求出错(404)'; break;              
				case 408: err.message = '请求超时(408)'; break;              
				case 500: err.message = '服务器错误(500)'; break;              
				case 501: err.message = '服务未实现(501)'; break;              
				case 502: err.message = '网络错误(502)'; break;              
				case 503: err.message = '服务不可用(503)'; break;              
				case 504: err.message = '网络超时(504)'; break;              
				case 505: err.message = 'HTTP版本不受支持(505)'; break;              
				default: err.message = `连接出错(${err.response.status})!`;          
			}      
		} else {          
			err.message = '连接服务器失败!'      
		}      
		message.error(err.message);      
		return Promise.reject(err);    
	})
}
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值