axios封裝

http.js

import axios from 'axios'
axios.defaults.baseURL="http://127.0.0.1:8000/"
axios.defaults.timeout = 1000000;
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';



axios.interceptors.request.use(    
    config => {
        // 每次傳送請求之前判斷是否存在token，如果存在，則統一在http請求的header都加上token，不用每次請求都手動添加了
        const token = sessionStorage.getItem("jwt_token")   
        console.log(token)  
        if (token){
            config.headers.Authorization = 'JWT '+ token
        }           
        return config;    
    },    
    error => {        
        return Promise.error(error);    
    })

    


axios.interceptors.response.use(    
    // 請求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
          
    // 請求失敗
    error => {
        if (error.response) {
            // 判斷一下返回結果的status == 401？  ==401跳轉登入頁面。  ！=401passs
            console.log(error.response)
            if(error.response.status===401){
                // 跳轉不可以使用this.$router.push方法、
                // this.$router.push({path:'/login'})
                window.location.href="127.0.0.1:8000/#/login"
            }else{
                // errorHandle(response.status, response.data.message);
                return Promise.reject(error.response);
            }
            // 請求已發出，但是不在2xx的範圍 
        } else {
            // 處理斷網的情況
            // eg:請求超時或斷網時，更新state的network狀態
            // network狀態在app.vue中控制著一個全域性的斷網提示元件的顯示隱藏
            // 關於斷網元件中的重新整理重新獲取資料，會在斷網元件中說明
            // store.commit('changeNetwork', false);
            return Promise.reject(error.response);
        }
    });


// 封裝xiaos請求  封裝axios裡的get
export function axios_get(url,params){
    return new Promise(
        (resolve,reject)=>{
            axios.get(url,{params:params})
            .then(res=>{
                console.log("封裝資訊的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}


export function axios_post(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.post(url,JSON.stringify(data))
            .then(res=>{
                console.log("封裝資訊的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}

export function axios_put(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.put(url,JSON.stringify(data))
            .then(res=>{
                console.log("封裝資訊的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}

export function axios_delete(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.delete(url,{params:data})
            .then(res=>{
                console.log("封裝資訊的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}



 

api.js

import {axios_get,axios_post,axios_delete,axios_put} from './http.js'

export const jwt_send_get = p  => axios_get("/appjwt/index01/",p)