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=>{

 })