vue axios拦截器处理post请求中添加qs处理参数问题

迷南。 2021-07-24 18:23 626阅读 0赞

Axios拦截器
    	(1)在发送之前和接收之前的一些判断
    	(2)参数为当前网络请求信息
    	(3)config.method为请求方法
    	(4)config.data为请求url
    
    	1、在main.js中使用
    
    	添加请求拦截器
    		Axios.interceptors.request.use(function (config) {
    		    在发送请求之前做些什么
    		    return config;
    		  }, function (error) {
    		    对请求错误做些什么
    		    return Promise.reject(error);
    		  });
    
    	添加响应拦截器
    		Axios.interceptors.response.use(function (response) {
    		    对响应数据做点什么
    		    return response;
    		  }, function (error) {
    		    对响应错误做点什么
    		    return Promise.reject(error);
    		  });
    
    	2、因为axios的post请求不能只传入{键值对},还要qs转换,因此为了避免多个请求都要添加
    		(1)在main.js中引入
    			import qs from 'qs'
    		(2)在请求拦截器中设置
    
    			Axios.interceptors.request.use(function (config) {
    				if(config.method==='post')
    				{
    					config.data=qs.stringify(config.data);
    				}
    		    return config;
    		  }, function (error) {
    		    // 对请求错误做些什么
    		    return Promise.reject(error);
    		  });

代码示例：  
main.js

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import Axios from 'axios'
    import qs from 'qs'
    
    Vue.config.productionTip = false
    
    Vue.prototype.$axios=Axios
    
    // 添加请求拦截器
    Axios.interceptors.request.use(function (config) { 
        // 在发送请求之前做些什么
        if(config.method==='post')
        { 
        	config.data=qs.stringify(config.data)
        }
        return config;
      }, function (error) { 
        // 对请求错误做些什么
        return Promise.reject(error);
      });
    
    // 添加响应拦截器
    Axios.interceptors.response.use(function (response) { 
        // 对响应数据做点什么
        return response;
      }, function (error) { 
        // 对响应错误做点什么
        return Promise.reject(error);
      });
    
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      data:{ foo:'hello foo'},
      components: {  App },
      template: '<App/>'
    })