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;
// get all
        Unit.getApi2('/users',{},{}).then((res)=>{
            console.log(res.data)
        })
        // // // get one
        const id = 33;
        Unit.getApi2(`/users/${id}`,{},{}).then((res)=>{
            console.log(res.data)
        })
        //更新
        Unit.putApi(`/users/${id}`,{name:1,age:32},{}).then((res)=>{
            console.log(res.data)
        })
        //删除ok
        // let _id = 33;
        // Unit.delApi(`/users/${_id}`,{},{}).then((res)=>{
        //     console.log(res.data)
        // })
        // 插入数据
        Unit.postApi2('/users',{name:4,age:32},{}).then((res)=>{
            console.log(res.data)
        }) app.use(
      '/users',createProxyMiddleware({
        target: 'http://127.0.0.1:7001/',
        changeOrigin: true,
      })
    );

本人CSDN本章地址:https://blog.csdn.net/lastone1212/article/details/117366246

axios 高级封装的更多相关文章

  1. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  2. vue中对axios进行封装

    在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目), 以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改 src/c ...

  3. axios方法封装

    axios方法封装 一般情况下,我们会用到的方法有:GET,POST,PUT,PATCH,封装方法如下:     五.封装后的方法的使用 1.在main.js文件里引用之前写好的文件,我的命名为htt ...

  4. 聊聊 Vue 中 axios 的封装

    聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...

  5. Vue中axios的封装和api接口的统一管理

    更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...

  6. 三、VUE项目BaseCms系列文章:axios 的封装

    项目开发中 ajax 是不可缺少的,一个好的封装可以减少我们很多的重复代码,维护也更方便.在 vue 开发中我们用的比较多的就是 axios.下面代码是项目中用到的 axios 的封装. http.j ...

  7. vue中axios的封装以及简单使用

    一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...

  8. vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装

    相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...

  9. 第五十五篇:Axios的封装

    好家伙, 上图 1.为什么需要封装axios? 当我们改变项目的使用环境时候,url也会随之改变,那么我们就需要改很多axios请求中的url配置 现在我们将axios封装,在项目使用环境改变时我们只 ...

随机推荐

  1. 洛谷 P6772 - [NOI2020]美食家(广义矩阵快速幂)

    题面传送门 题意: 有一张 \(n\) 个点 \(m\) 条边的有向图,第 \(0\) 天的时候你在 \(1\) 号城市,第 \(T\) 天的时候你要回到 \(1\) 号城市. 每条边上的边权表示从城 ...

  2. Codeforces 1406E - Deleting Numbers(根分+数论)

    Codeforces 题面传送门 & 洛谷题面传送门 一道个人感觉挺有意思的交互题,本人一开始想了个奇奇怪怪的做法,还以为卡不进去,结果发现竟然过了,而且还是正解( 首先看到这类题目可以考虑每 ...

  3. Python中关于join函数的陷阱?

    目录 说明 数据说明 正确示例 错误示例 解决办法 说明 最近在用Python的join函数连接多个列表时,出现了如下两个错误,即合并类型不一致.折腾了很久才找到原因,真是基础不牢,地动山摇. Typ ...

  4. char和varchar2

    1.CHAR的长度是固定的,而VARCHAR2的长度是可以变化的. 比如,存储字符串"abc",对于CHAR (10),表示你存储的字符将占10个字节(包括7个空字符) 而同样的V ...

  5. 解决UE4项目编辑器启动时出现LogLinker: Warning: Failed to load '/Game/FirstPersonBP/FirstPersonOverview': Can't find file.

    UE4版本:4.24.3源码编译版本 Windows10 + VS2019环境 LogLinker: Warning: Failed to load '/Game/FirstPersonBP/Firs ...

  6. 巩固javaweb第十一天

    巩固内容: HTML <script> 元素 <script>标签用于加载脚本文件,如: JavaScript. <script> 元素在以后的章节中会详细描述. ...

  7. HDFS03 HDFS的API操作

    HDFS的API操作 目录 HDFS的API操作 客户端环境准备 1.下载windows支持的hadoop 2.配置环境变量 3 在IDEA中创建一个Maven工程 HDFS的API实例 用客户端远程 ...

  8. Java 监控基础 - 使用 JMX 监控和管理 Java 程序

    点赞再看,动力无限.Hello world : ) 微信搜「程序猿阿朗 」. 本文 Github.com/niumoo/JavaNotes 和 未读代码网站 已经收录,有很多知识点和系列文章. 此篇文 ...

  9. Ecshop 安装

    参考 http://www.68ecshop.com/article-617.html ecshop的安装第一步:下载ecshop网店系统正式版安装包 我们可以来ecshop开发中心的官网(www.6 ...

  10. STM32 CAN用队列缓冲接收的例子

    [1]CAN接收用队列缓冲的例子: 发单帧没有问题,多帧或者连续发两帧就有问题.