axios 二次封裝


//對axios進行二次封裝

import axios from 'axios';
import qs from 'qs';

// 根據環境變量區分接口的默認地址
switch(process.env.NODE_ENV){
    case "production":
        axios.defaults.baseURL = "http://生產環境地址";
        break;
    case "test":
        axios.defaults.baseURL = "http://測試環境地址";
        break;  
    default:
        axios.defaults.baseURL = "http://開發環境地址" 
}

//設置超時時間和跨域是否允許攜帶憑證
axios.defaults.time = 10000;
axios.defaults.withCreadentials = true ;

//設置 請求傳遞數據的格式
axios.defaults.header['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data);

//設置請求攔截器
//客戶端發送請求 - > [請求攔截器] - > 服務器
//TOKEN校驗 (JWT):接收服務器返回的token,存儲到本地存儲中,每一次向服務器發請求,需要把token帶上
axios.interceptors.reques.use((config) => {
    //攜帶token
    const token = localStorage.getItem('token');
    token && (config.headers.Authorization = token);
    return config;
},error => {
    return Promise.reject(error)
    }
);

//響應攔截器
//服務端返回信息 - > [攔截的統一處理] - > 客戶端的js獲取到信息

// axios.defaults.validateStatus = status => {
//     //自定義響應成功的HTTP狀態碼
//     return /^(2|3)\d{2}$/.test(status)
// }
axios.interceptors.response.use(response => {
    return response
}, error => {
    //對請求返回的錯誤進行處理
    let {response } = error;
    if(response) {
        //服務器返回結果了
        switch (response.status) {
            case 401:     //=>權限
                            //提示未登錄或無權限等;
                break;
            case 403:       //服務器拒絕執行 (token過期)
                break;
            case 404:       //找不到頁面
                break;
        }
    } else {
        //服務器連結果都沒有返回
        if(!window.navigator.onLine) {
            //斷網處理:跳轉斷網頁面/提示網絡錯誤等等
            return;
        }
        return Promise.reject(error)
    }
    
})
export default axios;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM