react 封装axios

简介: react 封装axios

创建一个api的js文件复制以下代码黏贴即可


import axios from 'axios';
import qs from 'qs';
const Unit = {
    async getApi(ajaxCfg) {
        let data = await axios.get(ajaxCfg.url, { params: ajaxCfg.cfg },
            {
                headers: ajaxCfg.headers,
            })
        return data;
    },
    async getApi2(url, cfg, headers) {
        let data = await axios.get(url, { params: cfg },
            {
                headers: headers
            })
        return data;
    },
    async postApi(url, cfg, headers) {
        let fd = new FormData();
        for (let key in cfg) {
            fd.append(key, cfg[key]);
        }
        let data = await axios.post(url, cfg,
            {
                headers: headers
            })
        return data;
    },
    async putApi(url, cfg, headers) {
        let data = await axios.put(url, qs.stringify(cfg), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        })
        return data;
    },
    async postApi2(url, cfg, headers) {
        let data = await axios.post(url, cfg,
            {
                headers: headers
            })
        return data;
    },
    async postApi3(url, cfg, headers) {
        let data = await axios.post(url, qs.stringify(cfg), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            }
        })
        return data;
    },
    async delApi(url, cfg, headers) {
        let data = await axios.delete(url, { params: cfg }, {
            headers: headers
        })
        return data;
    },
    async requestApi(cfg, headers, file) {
        let fd = new FormData();
        fd.append('param', JSON.stringify(cfg));
        if (file) {
            // 上传证明
            if (file.length) {
                for (let i = 0, len = file.length; i < len; i++) {
                    fd.append('files', file[i]);
                }
            } else {
                // 单个上传
                for (let key in file) {
                    fd.append(key, file[key]);
                }
            }
        }
        let data = await axios.post('/batch', fd,
            {
                headers: headers
            })
        return data;
    }
}
export default Unit;
相关文章
|
3天前
|
JavaScript
vue封装axios(用interceptors封装)
vue封装axios(用interceptors封装)
13 0
|
3天前
|
前端开发
Axios request 封装技巧:提升代码复用和效率的步骤
在开发中,为了提高效率,通常对 Axios 进行封装,简化了请求的发送和对响应的处理。同时,统一错误处理机制有助于维护代码的清晰和一致性。本文介绍了一些高效封装 Axios 请求的方法。
Axios request 封装技巧:提升代码复用和效率的步骤
|
4天前
|
存储 JSON 前端开发
封装axios的两种方式
封装axios的两种方式
|
3天前
|
缓存 前端开发 JavaScript
前端vue3分享——项目封装axios、vite使用env环境变量
前端vue3分享——项目封装axios、vite使用env环境变量
25 0
|
3天前
|
存储 算法 JavaScript
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
今天这篇文章,主要是讲述对axios封装的请求,由于部分请求可能存在延时的情况。使得接口可能存在会被持续点击(即:接口未响应的时间内,被持续请求),导致重复请求的问题,容易降低前后端服务的性能!故提出给axios封装的配置里面,新增一个防抖函数,用来限制全局请求的防抖。
< 今日小技巧:Axios封装,接口请求增加防抖功能 >
|
3天前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。
|
3天前
axios封装和配置
axios封装和配置
21 0
|
3天前
04_装饰器封装axios_get请求
04_装饰器封装axios_get请求
30 0
|
3天前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
3天前
|
资源调度 JavaScript API