axios封装 文件名称 http-server.js

我们平时的项目中会用到axios来做ajax请求,但是都要进行封装过

http-server.js 封装如下:

/***
 * Created by Simple on 2018/1/14 0014.
 * Http请求控制器模块
 */

import axios from 'axios';
import store from '@/store/index';
import types from '@/store/types';
import router from '@/router/index';
import { Loading, Message } from 'element-ui';

// axios 配置
axios.defaults.timeout = 15000;
// axios.defaults.baseURL = 'http://';

// 配置通用请求动画
let loading = null;

axios.interceptors.request.use(config => {
    console.time('ajax请求耗时');
    if (store.state.users.token) {
        config.headers.Authorization = `${store.getters.token}`;
    }

    loading = Loading.service({
        lock: true,
        text: '拼命加载中...',
        background: 'rgba(255, 255, 255, .6)'
    });

    return config;
}, err => {
    loading.close();
    return Promise.reject(err);
});

// http response 拦截器
axios.interceptors.response.use(response => {
    if (response && response.data) {
        switch (response.data.code) {
        case '401':
            // 401 清除token信息并跳转到登录页面
            store.commit(types.CLEAR_USER_TOKEN);
            Message.error({
                message: '身份过期，请重新登录'
            });

            setTimeout(() => {
                router.replace({
                    path: '/login',
                    name: 'Login',
                    query: { redirect: router.currentRoute.fullPath }
                });
            }, 1200);
            break;
                //无权限
        case '403':
            router.replace({
                name: 'noAuth',
                query: { redirect: router.currentRoute.fullPath }
            });
        }
    }
    loading.close();
    console.timeEnd('ajax请求耗时');
    return response;
}, error => {
    if (error.response) {
        switch (error.response.status) {
        case '401':
                // 401 清除token信息并跳转到登录页面
            store.commit(types.CLEAR_USER_TOKEN);
            router.replace({
                name: 'Login',
                query: { redirect: router.currentRoute.fullPath }
            });
            break;

                //无权限
        case '403':
            router.replace({
                name: 'noAuth',
                query: { redirect: router.currentRoute.fullPath }
            });
            break;
        }
    }
    loading.close();
    Message.error({
        message: '哎呀~ (ಥ﹏ಥ)网络又开小差了,请稍后刷新重试!'
    });
    return Promise.reject(error.response.data);
});

export default axios;

api.js 调用者,调用方法如下:

import axios from '../method/http-server';

// axios.defaults.headers.common['language'] = common.getCurrentLanguage();

//测试服务器
let base = 'http://api.xxxx.com';

// 内网
//let base = 'http://192.168.0.1';

//生产环境
if (process.env.NODE_ENV === 'production') {
    // 外网
    // base = 'https://api.xxxxx.com';
}

let baseCommon = base + '/common';    //服务名 前缀
let baseParking = base + '/parking';    

// 定义请求方式
const methodPut = {
    headers: {
        method: 'PUT'
    }
};

const methodDelete = {
    headers: {
        method: 'DELETE'
    }
};

//get调用方式

/**
 * 获取监控台数据
 * @param {*} beginTime
 * @param {*} endTime
 */
export const getMonitorData = (beginTime, endTime) => {
    return axios.get(`${baseParking}/owner/monitor`, {
        params: {
            begin: beginTime,
            end: endTime
        }
    }).then((result) => {
        return result.data;
    });
};

//post调用方式

/**
 * 用户登录
 * @param params
 * @return {Promise.<TResult>|Promise<any>}
 */
export const userLogin = (data) => {
    return axios.post(`${baseParking}/owner/login`, data).then((result) => {
        return result.data;
    });
};

/**
 * 用户注销
 * @param params
 * @return {Promise.<TResult>|Promise<any>}
 */
export const userLogout = () => {
    return axios.post(`${baseParking}/owner/loginOut`, null).then((result) => {
        return result.data;
    });
};

//put 调用
/**
 * 管理员修改密码
 * @param data
 * @return {Promise.<TResult>|Promise<any>}
 */
export const ownerUpdatePassword = (data) => {
    return axios.post(`${baseParking}/owner/setOwnerPassword`, data, methodPut).then((result) => {
        return result.data;
    });
};

//delete调用

/**
 * 注销平台管理员账号
 * @param params
 * @param authId
 * @return {Promise.<TResult>|Promise<any>}
 */
export const adminAccountDelete = (params, authId) => {
    return axios.post(`${baseParking}/owner/${authId}/ownerAuthAdmin`, params, methodDelete).then((result) => {
        return result.data;
    });
};

返回值为promise对象

demo.js

//返回值如下

 /**
   * 监控台
   * @param {*} beginTime
   * @param {*} endTime
   */
  getMonitorData(beginTime, endTime).then((res) => {
       if (res && res.code == '200') {
               //成功操作 TODO
        } else {
               //错误操作 TODO
        }
  });