ES6 async 与 await 实战
下面来说一说通过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即可。
ES6 async 与 await 实战的更多相关文章
- es6 async与await实战
在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面 ...
- es6 async和await
es7 async和await ,作为genertor函数语法糖,在使用上比generator函数方便的,Generator 函数就是一个封装的异步任务,或者说是异步任务的容器.异步操作需要暂停的地方 ...
- ES6 async await
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ES6 Generator vs ES6 async/await
ES6 Generator vs ES6 async/await next yield promise refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允 ...
- ES6中async与await的使用方法
promise的使用方法 promise简介 是异步编程的一种解决方案.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.解决回调函数嵌套过多的情况 const promise =n ...
- ES6之async与await
· async - await 是 Promise 和 Generator 的语法糖,目的只是为了让我们书写代码时更加流畅,增强代码的可读性. · async - await 是建立在Promise机 ...
- 异步async、await和Future的使用技巧
由于前面的HTTP请求用到了异步操作,不少小伙伴都被这个问题折了下腰,今天总结分享下实战成果.Dart是一个单线程的语言,遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞, ...
- flutter 异步async、await和Future的使用技巧
由于前面的HTTP请求用到了异步操作,不少小伙伴都被这个问题折了下腰,今天总结分享下实战成果.Dart是一个单线程的语言,遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞, ...
- 不使用回调函数的ajax请求实现(async和await简化回调函数嵌套)
在常规的服务器端程序设计中, 比如说爬虫程序, 发送http请求的过程会使整个执行过程阻塞,直到http请求响应完成代码才会继续执行, 以php为例子 $url = "http://www. ...
随机推荐
- What is Double Spending & How Does Bitcoin Handle It?
https://coinsutra.com/bitcoin-double-spending/ Bitcoin is gaining rapid popularity and adoption acro ...
- 更改Xamarin Android App名称
更改Xamarin Android App名称 Xamarin Android生成的App名称默认和项目名一致.修改该名称有两种方式. 第一种方式:右击Android项目,选择“属性”命令,然 ...
- 【计算几何】【二分】【随机增量法】hdu6167 Missile Interception
n个半径为R的圆是否有公共部分,等价于询问是否存在一个半径小于R的圆,能覆盖所有n个圆的圆心. 对这n个点求最小圆覆盖即可.从网上扒了个随机增量法的代码. 这样算上二分,复杂度就是nlogn了. #i ...
- 【数位dp】UVA - 11361 - Investigating Div-Sum Property
经典数位dp!而且这好像是数位dp的套路板子……不需要讨论原来我很头疼的一些边界. 改天用这个板子重做一下原来的一些数位dp题目. http://blog.csdn.net/the_useless/a ...
- Problem D: 零起点学算法95——弓型矩阵
#include<stdio.h> #include<string.h> int main() { ][]; while(scanf("%d%d",& ...
- jquery 封装的ajax调用
(function(){ var Ploy = { Config: { ajaxUrl: "/ajax/ploy.ashx" ...
- Web API使用记录系列(三)Web API与Owin
还好在坚持,今天继续更新第三篇随笔----使用owin来启动WebAPI(这里还是以IIS为宿主,当然也可以使用别的如Console.Windows Server等) 关于OWIN(Open Web ...
- Java将字符串写入文件与将文件内容读取到字符串
原文:http://blog.csdn.net/liuweiyuxiang/article/details/69487326 将字符串写入文件 方法一 public void WriteStringT ...
- openGl 基础
最近由于手机项目中需要用到OpenGL ES的知识,所以这段时间正在研究OpenGL的相关知识.因为OpenGL ES是OpenGL的剪裁版本,所以我直接从OpenGL入手,然后再去看OpenGL E ...
- easyui combobox可编辑的情况下,只能首字母开始过滤的问题选项
esayui中的combobox下拉列表在可编辑的情况下可以输入内容来过滤下拉框的选项,而1.4.2版本只能在从首字母开始过滤例如其中一个选项是"test", 只能输入" ...