es6 async与await实战
2024-09-04 09:42:43
在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面的业务,如果我们想把增删改查的业务封装起来,基本没可能,或者封装的很不优雅
下面来说一说通过async和await方式来辅助请求和封装
首先我们定义一个类,定义一个async方法,才可以使用await
class JForm extends React.Component { handleSubmit = () => { ...
this.handleInsert(obj)
... } async handleInsert(obj) {
let url = '...'
let res = await insert(url, obj)
if(res){
this.hideModal();
this.props.refresh();
}
}; }
上面是一个react的一段代码,当触发handleSubmit 表单提交方法,会调用handleInsert方法,此时会等await insert 执行完返回结果再执行if(res)的判断
我们再来看看重要的insert方法应该怎么写呢
export function insert(url, obj) {
return new Promise(function (resolve, reject) {
const hide = message.loading('正在新增...', 0);
let res = apiPost(url, obj).then(function (res) {
const {data, ret, msg} = res;
hide();
if(ret==200) {
Success(`添加1条数据`);
} else {
Error(res.msg);
}
resolve(ret==200?true:false)
})
})
}
看起来貌似有点复杂?其实核心的代码只有下面的部分
export function insert(url, obj) {
return new Promise(function (resolve, reject) {
resolve(ret==200?true:false)
})
}
对的,只有 return new Promise 和 resolve() ,resolve里面的data就是let res要接收的值了,我们可以在请求后将结果传入resolve即可。
如果场景不是react和class用不了async 和await 怎么办呢?其实我的insert方法下还有调用一个方法apiPost体也有resolve,
export const apiPost = (url, configObj) => {
if (typeof (configObj) === 'undefined') {
configObj = []
}
return new Promise(function (resolve, reject) {
const reqUrl = base.host + '/' + url + '?token=' + localStorage.getItem('token');
axios.post(reqUrl, qs.stringify({...configObj})).then(
response => {
let resulData = response.data
resolve(resulData)
}
);
})
}
在insert可以使用.then(function (res) { 来接收resolve过来的值,不过一对比就会发现多了很多(),{}了,不过是底层一点方法,只写一两次,所有就无所谓啦,最重要还是保持视图应用层的简洁
不吹水了,新年快乐
最新文章
- Linux查看系统开机时间
- [[UIScreen mainScreen] bounds] 返回的屏幕尺寸不对
- 转 ext文件系统及块组
- Gradle version 2.2 is required. Current version is 2.14.1.
- poj 1325 Machine Schedule
- 策略模式c++【转】
- 怎么设置 mysql 多主复制
- ios之点语法
- oracle 中使用触发器自动生成UUID
- JQ 模仿注册时等待的时间
- android listview 三种适配器设置
- Failed to load libGL.so问题解决
- php取出数组中的最大值
- MS SQL 锁与事务
- float与double
- 深入理解node.js异步编程:基础篇
- 使用pickle进行存储变量
- Kafka:ZK+Kafka+Spark Streaming集群环境搭建(九)安装kafka_2.11-1.1.0
- ios 两个 TableView 之间的联动, TableView 与 CollectionView 之间的联动
- 开始试用Dynamics 365
热门文章
- java获取src下包的文件的路径
- CMD/AMD的原理、区别和应用
- Kafka server.properties配置,集群部署
- [Spring Boot] Adding JPA and Spring Data JPA
- MyBatis批量添加、修改和删除
- mod_tile编译出错 -std=c++11 or -std=gnu++11
- eclipse工程重命名后,无法生产class问题
- DB2日期与时间
- WP8简单的计算器
- mysql bin路径下的mysql被杀毒软件查杀后恢复过来也无法启动