Axios实现FormData的数据保存

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1、axios的配置 （config.js）

import axios from 'axios';

// let apiBaseUrl = process.env.BASE_API_URL
const instance = axios.create({
    timeout: 30000,
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    withCredentials: true // 允许携带cookie
});
// instance.defaults.headers.get['Content-Type'] = 'application/json';
instance.interceptors.request.use(function (config) {
    return config;
}, function (error) {
    return Promise.reject(error);
});

// Add a response interceptor
instance.interceptors.response.use(function (response) {
    // 登录判断
    return response;
}, function (error) {
    return Promise.reject(error);
});

export default instance;

2、axios的接口快捷定义

import instance from './httpConfig';
import qs from 'qs';
let apiBaseUrl = '//xxx.xxx.com';

export const httpPost = function (url, params, succBack, failBack, errBack) {
    const httpUrl = apiBaseUrl + '/adminXMKPT' + url;
    return instance.post(httpUrl, qs.stringify(params)).then(res => {
        if (res.data && res.data.code === 0) {
            if (succBack) { succBack(res.data) }
        } else if (res.data && res.data.code && res.data.code === 12) {
            // 清除token
            const _this = window.top.myMainVue;
            // 弹提示说未登录?
            if (failBack) { failBack(res.data) }
            if (_this) {
                _this.$router.push({ path: '/login', query: {redirect: _this.$route.fullPath }});
            } else {
                window.top.location.href = '/#/login';
            }
        } else {
            if (failBack) {
                failBack(res.data);
            }
        }
    }, err => {
        if (errBack) { errBack(err) }
    })
};
export const httpGet = function (url, params, succBack, failBack, errBack) {
    const httpUrl = apiBaseUrl + '/adminXMKPT' + url;
    return instance.get(httpUrl, {params: params}).then(res => {
        if (res.data && res.data.code === 0) {
            if (succBack) { succBack(res.data) }
        } else if (res.data && res.data.code && res.data.code === 12) {
            // 清除token
            const _this = window.top.myMainVue;
            // 弹提示说未登录?
            if (failBack) { failBack(res.data) }
            if (_this) {
                _this.$router.push({ path: '/login', query: {redirect: _this.$route.fullPath }});
            } else {
                window.top.location.href = '/#/login';
            }
        } else {
            if (failBack) {
                let obj = res.data;
                failBack(obj);
            }
        }
    }).catch(error => {
        if (errBack) { errBack(error) }
    });
}
export const httpUpdate = function (url, params, succBack, failBack, errBack) {
    const httpUrl = apiBaseUrl + '/adminXMKPT' + url;
    let newParams = qs.stringify(params);
    return instance.patch(httpUrl,  newParams).then(res => {
        if (res.data && res.data.code === 0) {
            if (succBack) { succBack(res.data) }
        } else if (res.data && res.data.code && res.data.code === 12) {
            // 清除token
            const _this = window.top.myMainVue;
            // 弹提示说未登录?
            if (failBack) { failBack(res.data) }
            if (_this) {
                _this.$router.push({ path: '/login', query: {redirect: _this.$route.fullPath }});
            } else {
                window.top.location.href = '/#/login';
            }
        } else {
            if (failBack) {
                let obj = res.data;
                failBack(obj);
            }
        }
    }, err => {
        if (errBack) { errBack(err) }
    })
}
export const httpDelete = function (url, params, succBack, failBack, errBack) {
    const httpUrl = apiBaseUrl + '/adminXMKPT' + url;
    return instance.delete(httpUrl, params).then(res => {
        if (res.data && res.data.code === 0) {
            if (succBack) { succBack(res.data) }
        } else if (res.data && res.data.code && res.data.code === 12) {
            // 清除token
            const _this = window.top.myMainVue;
            // 弹提示说未登录?
            if (failBack) { failBack(res.data) }
            if (_this) {
                _this.$router.push({ path: '/login', query: {redirect: _this.$route.fullPath }});
            } else {
                window.top.location.href = '/#/login';
            }
        } else {
            if (failBack) {
                let obj = res.data;
                failBack(obj);
            }
        }
    }, err => {
        if (errBack) { errBack(err) }
    })
}

// 保存form data(包括上传文件)
export const httpFormPost = function (url, params, succBack, failBack, errBack) {
    const httpUrl = apiBaseUrl + '/adminXMKPT' + url;
    let config = {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }
    return instance.post(httpUrl, params, config).then(res => {
        if (res.data && res.data.code === 0) {
            if (succBack) { succBack(res.data) }
        } else if (res.data && res.data.code && res.data.code === 12) {
            // 清除token
            const _this = window.top.myMainVue;
            // 弹提示说未登录?
            if (failBack) { failBack(res.data) }
            if (_this) {
                _this.$router.push({ path: '/login', query: {redirect: _this.$route.fullPath }});
            } else {
                window.top.location.href = '/#/login';
            }
        } else {
            if (failBack) {
                failBack(res.data);
            }
        }
    }, err => {
        if (errBack) { errBack(err) }
    })
};