axios HttpClient数据请求封装

import axios from 'axios';
import systemInfo from "../config/system-info";
import { ElNotification } from 'element-plus';

/**
     * 获取token的方法
     * @returns {string}
     */
const getToken = () => {
    const token = localStorage.getItem("token");
    return token ? token : '';
}

/**
 * 设置头部信息
 * @param type 请求头类别 0:为普通请求,1为文件上传
 */
const setHeader = (type) => {
    // 数据请求格式
    const contentTypes = ['application/json;charset=utf-8', 'multipart/form-data'];
    // 请求头
    const headers = {
        'Content-Type': contentTypes[type],
        Authorization: getToken()
    };
    return axios.create({
        baseURL: systemInfo.baseUrl,
        withCredentials: false,
        headers: headers
    })
}

/**
 * 发送http数据请求
 * @param type 请求头类别
 * @param method 请求方法
 * @param url 类地址
 * @param params 请求参数
 * @param success 数据成功回调
 * @param fail 数据失败回调
 */
const sendHttp = (type, method, url, params, success, fail) => {
    setHeader(type)({
        method: method,
        url: url,
        timeout: 40000,
        data: method === 'POST' ? params : null,
        params: method === 'GET' ? params : null,
    }).then(res => {
        httpInfo(res.data, success, fail)
    }).catch(() => {
        httpInfo({
            code: 500,
            message: "请求地址错误或服务器异常!",
            data: null
        }, success, fail)
    })
}
/**
 * 数据消息处理
 * @param data 返回数据
 * @param data 服务返回信息
 * @param code 服务状态码
 * @param success 数据成功回调
 * @param fail 数据失败回调
 * @returns 
 */
const httpInfo = ({ data, message, code }, success, fail) => {
    if (code === 200) {
        success && success(data);
        return;
    }
    fail && fail(data);
    ElNotification({
        title: '数据服务提示',
        type: 'warning',
        message,
        duration: '1500'
    })
}

/**
* GET数据请求方式
* @param url 数据类地址
* @param data 请求参数
* @param success 数据成功回调
* @param fail 数据失败回调
*/
export const get = (url, data, success, fail) => {
    sendHttp(0, 'GET', url, data, success, fail);
};
/**
 * POST数据请求方式,上传文件
 * @param url 数据类地址
 * @param data 请求参数
* @param success 数据成功回调
 *@param fail 数据失败回调
 */
export const post = (url, data, success, fail) => {
    sendHttp(0, 'POST', url, data, success, fail);
};
/**
 * POST数据请求方式,上传文件
 * @param url 数据类地址
 * @param data 请求参数
 * @param success 数据成功回调
 * @param fail 数据失败回调
 */
const file = (url, data, success, fail) => {
    sendHttp(1, 'POST', url, data, success, fail);
};
/**
 * promise数据请求
 * @param classUrl 数据类地址
 * @param data 请求参数
 */
const promise = (method, classUrl, data) => {
    return new Promise((resolve) => {
        switch (method) {
            case 'get':
                get(classUrl, data, resolve, resolve);
                break;
            case 'post':
                get(classUrl, data, resolve, resolve);
                break;
            case 'file':
                file(classUrl, data, resolve, resolve);
                break;
            default:
                get(classUrl, data, resolve, resolve);
        }
    })
}
/**
 * promise数据请求
 * @param {*} list 请求配置列表
 */
const promiseAll = async (list = []) => {
    if (list.length < 2) {
        alert('请添加请求信息')
        return []
    }
    const postList = [];
    list.map(item => {
        // 判断是否只有地址的get请求
        const isString = (typeof item === 'string');
        // 追加promise方法
        isString ? postList.push(promise('get', item, null)) : postList.push(promise(item.method || get, item.url || '', item.data || null));
    })
    return await Promise.all(postList);
}
export default {
    get,
    post,
    file,
    promise,
    promiseAll
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值