axios库二次封装

1、新建utils文件夹，在文件夹里面新建reques.js

import axios from 'axios';
import { Message, Loading } from 'element-ui'
import qs from 'qs'; //参数序列化，把数据格式转为 x-www-form-urlencoded

let BASE_URL = '', loadingInstance;
let HOST = process.env.NODE_ENV;
switch (HOST) {
    case 'development':
        BASE_URL = 'http://localhost:888';
        break;
    case 'test':
        BASE_URL = 'http://192.168.101.21/foxcubeCrm/';
        break;
    default:
        BASE_URL = 'http://192.168.101.21/foxcubeCrm/';
}
axios.create({
    //crossDomain: true,//设置cross跨域
    withCredentials: false,  //跨域请求是否允许携带cookie资源凭证
    baseurl: BASE_URL,
    time: 1000               //请求超时时间
    // responseType:"arraybuffer"  返回的数据格式


})


//  request请求拦截器
axios.interceptors.request.use(config => {

    // let token=localstorage.getItem('token');
    // token && (config.headers.Authorization=token);//请求携带token
    // config.headers = {
    //     'Content-Type': 'application/x-www-form-urlencoded'  //转换数据格式
    // }
    loadingInstance = Loading.service({
        lock: true,
        text: '飞速加载中……',
    });
    return config;
}, error => {
    return Promise.reject(error);
})

// 成功状态 有3的接口一般是资源重定向
// service.defaults.validateStatus=status=>{
//     return /^(2|3)\d{2}$/.test(status);
// };


// response响应拦截器
axios.interceptors.response.use(response => {
    setTimeout(() => {
        loadingInstance.close();
    }, 300)
    return response;

}, error => {
    setTimeout(() => {
        loadingInstance.close();
    }, 300)
    let { response } = error;
    if (response) {
        //服务器有返回内容
        var errormsg = '';
        switch (response.status) {
            case 400:
                errormsg = '错误请求'
                break;
            case 401:
                errormsg = '未登录,请重新登录'
                break;
            case 403:
                errormsg = '决绝访问'
                break;
            case 404:
                errormsg = '请求错误，未找到该资源'
                break;
            case 405:
                errormsg = '请求方法未允许'
                break;
            case 408:
                errormsg = '请求超时'
                break;
            case 500:
                errormsg = '服务器出错'
                break;
            case 501:
                errormsg = '网络未实现'
                break;
            case 502:
                errormsg = '网络错误'
                break;
            case 503:
                errormsg = '服务不可用'
                break;
            case 504:
                errormsg = '网络超时'
                break;
            case 505:
                errormsg = 'http版本不支持该请求'
                break;
            default:
                errormsg = '连接错误'
        }
        Message({ type: 'warning', message: errormsg });
        return false;
    } else {
        //服务器连结果都没有返回  有可能是断网或者服务器奔溃
        if (!window.navigator.online) {
            //断网处理
            Message('网络中断');
            return;
        } else {
            //服务器奔了
            Message('服务器奔了');
            return Promise.reject(error);
        }
    }
})


/*
*get 方法，对应get请求
*@param {String} url [请求的url地址]
*@param {Object} params[请求携带的参数]]
*/


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



/*
*post 方法，对应post请求
*@param {String} url [请求的url地址]
*@param {Object} params[请求携带的参数]]
*/


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


/*
*封装patch请求
 *@param url
 * @param params
 * @returns {Promise}
*/


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


/*
*put 请求
*@param url
* @param params
*/


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

2.新建api文件夹，在api文件夹里创建对应模块的js，写接口调用的方法

import {post,get,put,patch} from '@/utils/request'
export const login = params =>post('/api/login',params)

3.在login.vue直接引入该方法就可以直接使用

import { login } from "@/api/login";
login(data).then(res=>{

})

4.也可以在main.js引入直接到挂载到原型prototype上

import { post, get, put, patch } from './utils/request'
// 挂载到原型上
Vue.prototype.$post = post;
Vue.prototype.$get = get;

在需要使用请求数据的地方直接使用就ok

　　this.$post('/api/login',data).then(res=>{

         console.log(res)

   })

 

 

 

需要的可以直接下载代码    https://github.com/doujiangtao/vuexcms