axios的常用写法和axios上传文件(避坑指南)
2023-03-31 10:42:59 时间
学到很多东西的诀窍,就是一下子不要学很多。——洛克
前言
、axios是什么?
Axios是通过Promise实现XHR封装,其中Promise是控制手段,XHR是实际发送Http请求的客户端。都是AJAX技术的一种具体实现。
因为vue的火爆让axios成为现在比较流行的异步请求方式。本文章只是针对新手,大佬可以跳过。
一、常用写法
1.第一种
代码如下(示例(get方式))
// get传参数 后端接收 req.query
axios.get('请求地址', {
//参数/
params: {
ID: 12345
}
}) .then(function (response) { console.log(response); })
.catch(function (error) { console.log(error); });
axios.get是get请求方式 ,params是参数属性里面写字段名:this.当前组件变量。then是成功后的回调函数,catch错误后的回调函数。
2.第二种
代码如下(示例(post方式))
//post传参
axios.post('/url',{
firstName: 'Fred', // 参数 firstName
lastName: 'Flintstone' // 参数 lastName
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
});
二、向后台上传文件(图片)
代码如下(示例):
html代码:
<input type="file" v-on:change="update" nullmsg="新闻图片不能为空">
js代码:
param.append('files', file)向formData对象添加数据时候一定要注意:files是对应后台的参数名要不然传不过去的
update (e) { // 上传照片
let file = e.target.files[0]
console.log({data:file})
let param = new FormData() // 创建form对象
//注意files是对应后台的参数名哦
param.append('files', file) // 通过append向form对象添加数据
//console.log(param); // 添加form表单中其他数据
console.log(param.get('files')) // FormData私有类对象,访问不到,可以通过get判断值是否传进去
// 添加请求头
axios.post('/admin/FileSave',param,{
'Content-type' : 'multipart/form-data'
})
.then(response => {
console.log(response.data)
if (response.data.code === 0) {
console.log(response.data)
}
})
}
//图片
}
总结
axios是十分方便的Http库,大家写的时候注意符号这些,用起来都是很快的。
相关文章
- 前端进阶: 总结几个常用的JS搜索算法和性能对比
- 2020年 Common Lisp 使用情况调查
- 为什么要排序?排序算法的性能提升之道
- 每一位程序员,都可以贡献开源吗?
- 提示用户退出程序,你的做法是青铜还是王者?
- 程序员必备:5个强大的静态代码分析工具
- Go运行时中的 Mutex
- 从MySQL 5.6升级到8.0,我们付出了惨痛代价!
- 90%的程序员,都没用过多线程和锁,怎么成为架构师?
- 你了解DevOps的自动化架构GitOps吗?
- 码农欢乐多:属于程序员的爆笑时刻
- Github Actions 入门指南及实践
- 毕业生求职必会算法手把手教你二分法查找
- 从HTTP到HTTP/3的发展简史
- 又一新框架来袭,关系网络用于目标检测(文末附源码)
- Linux基础命令:作为开发人员,你还不知道嘛?
- GitHub发布年度报告:TypeScript成第四大语言
- 贪心算法:K次取反后最大化的数组和
- 初始化容器与 DefaultListableBeanFactory
- Golang GinWeb框架7-静态文件/模板渲染