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