vue 中 axios 使用底层搭建

src/api/request.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://www.*********.cn/api.php/';
        break;
    case 'test':
        BASE_URL = 'http://192.168.101.21/foxcubeCrm/';
        break;
    default:
        BASE_URL = 'http://192.168.101.21/foxcubeCrm/';
        break;
}

axios.create({
    //crossDomain: true,//设置cross跨域
    //withCredentials: false,  //跨域请求是否允许携带cookie资源凭证
    baseurl: BASE_URL,
    time: 10000,               //请求超时时间
    headers: { 'content-type': 'application/x-www-form-urlencoded' }
    // 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: '飞速加载中……',
    });

    config.data = qs.stringify(config.data)
    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)

    if(response.data.errno !== 'undefined'){
        if (response.data.errno !== 0) {
            Message({ type: 'warning', message: response.data.errdesc });
        }
    }

    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 = '连接错误'
                break;
        }

        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(BASE_URL + 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(BASE_URL + 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(BASE_URL + 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(BASE_URL + url, params)
            .then(res => {
                resolve(res.data);
            }, err => {
                reject(err);
            })
    })
}

src/main.js

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

src/views/test.vue

<template>
    <div class="page">

        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>

        <el-page-header content="详情页面">
        </el-page-header>

    </div>
</template>

<script>
export default({
    name:'test',
    data(){
        return{
            a:1
        }
    },
    created(){

        // this.$post('Index/index',{a:1})
        // .then(res=>{
        //     console.log(res)
        // })

        this.$post('Product/get_detail',{id:34})
        .then(res=>{
            console.log(res)
        })

    }
})
</script>

• https://www.cnblogs.com/yangwang12345/p/7808307.html
• https://www.cnblogs.com/h5it/p/13508493.html
• https://www.cnblogs.com/fsg6/p/13204535.html