axios封裝攔截器

Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。不少狀況咱們要對請求和其響應進行特定的處理；若是請求數很是多，單獨對每個請求進行處理會變得很是麻煩。好在強大的axios爲開發者提供了這樣一個API：攔截器。攔截器分爲 請求（request）攔截器和 響應（response）攔截器。

安裝 axios,qs

npm install axios –save-dev
複製代碼

安裝 qs

npm install qs –save-dev
複製代碼

請求攔截器

//引入axios和 qs
import axios from "axios";
import qs from "qs";
/****** 建立axios實例 ******/
const serve = axios.create({
    baseURL: process.env.BASE_URL,  // api的基本url，也能夠直接寫定好的url
    timeout: 5000  // 請求超時時間
});
serve.interceptors.request.use(config => {    
    config.method === 'post'        
        ? config.data = qs.stringify({...config.data})        
        : config.params = {...config.params};    
		  config.headers['Content-Type'] = 'application/x-www-form-urlencoded'; 
    return config;
    }, error => {  //請求錯誤處理 
           
        Promise.reject(error)
    }
);
複製代碼

響應攔截器

serve.interceptors.response.use(    
    response => {  //成功請求到數據 
           
        //這裏根據後端提供的數據進行對應的處理 
        if (response.data.result === 'TRUE') {            
            return response.data;        
        } else { 
			//打印錯誤信息
			console.error(response.data.data.msg)
             
        }    
    },    
    error => {  //響應錯誤處理console.log('error'); 
        console.error(error);        
        console.error(JSON.stringify(error));         
        let text = JSON.parse(JSON.stringify(error)).response.status === 404            
            ? '404'            
            : '網絡異常，請重試';        
        alert(text)        
        return Promise.reject(error)   
    }
)
複製代碼