vue axios的封裝 以及api的統一管理和使用

import axios from 'axios'
import ElementUI from 'element-ui';
import QS from 'qs';
import router from '../router/index';

axios.defaults.withCredentials=true;  //允許攜帶cookie
if (process.env.NODE_ENV === 'development') {
    axios.defaults.baseURL = '/api'     //開發地址用的是vue。config。js裏面定義的代理    在本地調試 一般存在跨域問題所以在vue.config.js中定義
} else if (process.env.NODE_ENV === 'production') {
    axios.defaults.baseURL = ''         //線上請求地址
}

//設置超時10s
axios.defaults.timeout = 10000

// 請求頭信息是爲post請求設置
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

axios.interceptors.response.use(
    response => {
        // 如果返回的狀態碼爲200，說明接口請求成功，可以正常拿到數據     
        // 否則的話拋出錯誤
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }
    },
    error => {
        if(error.response.status){
            switch(error.response.status){
                case 401:
                    router.push({path:'/login'}); 
                    break;
                case 403:
                    ElementUI.Notification({
                        title: '提示',
                        message: "登陸過期,請重新登錄",
                        type: 'warning'
                    });
                    setTimeout(()=>{
                        router.push({path:'/login'})
                    },1000);
                    break
                case 404:
                    ElementUI.Notification({
                        title: '提示',
                        message: "網絡請求不存在",
                        type: 'warning'
                    });
                    break
                default:
                    ElementUI.Notification({
                        title: '提示',
                        message: error.response.data.errMsg,
                        type: 'warning'
                    });
            }
            return Promise.reject(error.response)
        }
    }
);

/** 
 * 請求get方法
 * */ 
export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url+params)        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}

/**
 * 請求post方法
 */

export function post(url, params) {    
    return new Promise((resolve, reject) => {         
        axios.post(url, params)        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}

api的統一管理

/**
 * api接口統一管理
 */


import { get, post } from './http'

export const login = p => post('pellet/login', p);//保存 post方法

export const client_findByList = p => get('client/findByList', p);// get方法

api的使用

//先引入
import {login，client_findByList} from '@/request/api'
//post方法
login({
     username:this.param.username, 
     password:this.param.password
 }).then(res=>{

 })
//get方法
client_findByList（id）.then(res=>{

 })