axios 高级封装
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 高级封装的更多相关文章
- vue中Axios的封装和API接口的管理
前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...
- vue中对axios进行封装
在刚结束的项目中对axios进行了实践(好不容易碰上一个不是jsonp的项目), 以下为在项目中对axios的封装,仅封装了post方法,因为项目中只用到了post,如有需要请自行进行修改 src/c ...
- axios方法封装
axios方法封装 一般情况下,我们会用到的方法有:GET,POST,PUT,PATCH,封装方法如下: 五.封装后的方法的使用 1.在main.js文件里引用之前写好的文件,我的命名为htt ...
- 聊聊 Vue 中 axios 的封装
聊聊 Vue 中 axios 的封装 axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在 ...
- Vue中axios的封装和api接口的统一管理
更新的是我csdn上的文章,需要的话可以看下,互相学习点击去我的csdn vue中axios的封装 在vue项目和后端交互获取数据时,通常使用axios库,官方文档:https://www.npmjs ...
- 三、VUE项目BaseCms系列文章:axios 的封装
项目开发中 ajax 是不可缺少的,一个好的封装可以减少我们很多的重复代码,维护也更方便.在 vue 开发中我们用的比较多的就是 axios.下面代码是项目中用到的 axios 的封装. http.j ...
- vue中axios的封装以及简单使用
一.axios的封装 在vue中为了使用axios使用方便,不需要每一个模块进行导入,就需要对其进行封装: 1.新建http.js模块 import axios from 'axios' // 设置基 ...
- vue axios接口封装、Promise封装、简单的axios方法封装、vue接口方法封装、vue post、get、patch、put方法封装
相信大家在做前后端数据交互的时候都会给请求做一些简单的封装就像之前封装ajax方法一样axios的封装也是一样的简单下面这个就是封装的axios的方法,require.js import axios ...
- 第五十五篇:Axios的封装
好家伙, 上图 1.为什么需要封装axios? 当我们改变项目的使用环境时候,url也会随之改变,那么我们就需要改很多axios请求中的url配置 现在我们将axios封装,在项目使用环境改变时我们只 ...
随机推荐
- 最简单的Python3启动浏览器代码
#encoding=utf-8 from selenium import webdriver import time from time import sleep dr = webdriver.F ...
- java 单例模式实现代码
目录 1.使用静态内部类实现 2.使用枚举实现 3.序列化与反序列化 1.使用静态内部类实现 使用静态内部类实现单例模式,线程安全 class SingletonStaticInner { priva ...
- 妹子始终没搞懂OAuth2.0,今天整合Spring Cloud Security 一次说明白!
大家好,我是不才陈某~ 周二发了Spring Security 系列第一篇文章,有妹子留言说看了很多文章,始终没明白OAuth2.0,这次陈某花了两天时间,整理了OAuth2.0相关的知识,结合认证授 ...
- 难道你还不知道Spring之事务的回滚和提交的原理吗,这篇文章带你走进源码级别的解读。
上一篇文章讲解了获取事务,并通过获取的connection设置只读,隔离级别等:这篇文章讲事务剩下的回滚和提交. 事务的回滚处理 之前已经完成了目标方法运行前的事务准备工作.而这些准备工作的最大目的无 ...
- CSP-S2021 被碾压记
没啥好说的,不会 T3 这种贪心/dk,或者说我的贪心能力太拉跨导致 T3 这种基本的贪心都不会. 只能说,还好 CSP 不算省选.自爆了,根本没心情写游记. 希望大家不要因为我这次的失误而瞧不起我这 ...
- 【2020五校联考NOIP #3】序列
题面传送门 原题题号:Codeforces Gym 101821B 题意: 给出一个排列 \(p\),要你找出一个最长上升子序列(LIS)和一个最长下降子序列(LDS),满足它们没有公共元素.或告知无 ...
- LOJ #2769 -「ROI 2017 Day 1」前往大都会(单调栈维护斜率优化)
LOJ 题面传送门 orz 斜率优化-- 模拟赛时被这题送走了,所以来写篇题解( 首先这个最短路的求法是 trivial 的,直接一遍 dijkstra 即可( 重点在于怎样求第二问.注意到这个第二问 ...
- 【转】NG:垂枝桦基因组图谱构建(2+3组装)及重测序分析
转自希望组公众号.学习二代+三代组装策略的流程 垂枝桦(Betula pendula)是一种速生乔木,能在短短一年时间内开花,木质坚实,可做细工.家具等,经济价值极高.近日,芬兰研究人员对垂枝桦自交系 ...
- urllib的基本使用介绍
1. urllib中urlopen的基本使用介绍 1 ### urllib中urlopen的基本使用介绍 2 3 ## urlopen的基本用法(GET请求) 4 import urllib.requ ...
- linux系统中安装MySQL
linux系统中安装MySQL 检查原来linux系统中安装的版本 rpm -qa | grep mysql 将其卸载掉 以 mysql-libs-5.1.71-1.el6.x86_64 版本为例 r ...