nuxt使用axios配置拦截器

蔚落 2021-11-29 08:22 1003阅读 0赞

#### 第一步：安装axios [npm ][npm] ####

npm i @nuxtjs/axios

#### 第二步：配置 nuxt.config.js ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]

modules: [        
        	'@nuxtjs/axios',    
        ],    
        axios: {        
        	prefix: 'http://127.0.0.1:8185/api/',        
        	proxy: true    
       },

#### 第三步：创建axios.js ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]

#### 第四步：拦截 ####

**4-1：这种是官方推荐的方式** [文档地址][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]  
**这种方式好像无法对数据进行拦截**

$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：网上找到的一种方法，可以对数据进行拦截**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]

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);    
    	})
    }

[npm]: https://www.npmjs.com/package/@nuxtjs/axios
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20211129/5431ee2072d441fab344a7b4a0b6977b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 1]: /images/20211129/fc013a3e9b334582b0d3388fe1bcab88.png
[Link 1]: https://axios.nuxtjs.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 2]: /images/20211129/1fa0acbcbf514170badd75af44ea992a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70 3]: /images/20211129/9b2ec02e49a44da2ada46ff78805a5b3.png