下面来说一说通过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 实战的更多相关文章

  1. es6 async与await实战

    在使用js的时候,我们经常会遇到一个问题,就是我们需要等待请求返回再做下一步处理,之前的处理方式是通过ajax的success或者callback之类的方法,不过一层一层真的恶心,而且只是针对单个页面 ...

  2. es6 async和await

    es7 async和await ,作为genertor函数语法糖,在使用上比generator函数方便的,Generator 函数就是一个封装的异步任务,或者说是异步任务的容器.异步操作需要暂停的地方 ...

  3. ES6 async await

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ES6 Generator vs ES6 async/await

    ES6 Generator vs ES6 async/await next yield promise refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允 ...

  5. ES6中async与await的使用方法

    promise的使用方法 promise简介 是异步编程的一种解决方案.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.解决回调函数嵌套过多的情况 const promise =n ...

  6. ES6之async与await

    · async - await 是 Promise 和 Generator 的语法糖,目的只是为了让我们书写代码时更加流畅,增强代码的可读性. · async - await 是建立在Promise机 ...

  7. 异步async、await和Future的使用技巧

    由于前面的HTTP请求用到了异步操作,不少小伙伴都被这个问题折了下腰,今天总结分享下实战成果.Dart是一个单线程的语言,遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞, ...

  8. flutter 异步async、await和Future的使用技巧

    由于前面的HTTP请求用到了异步操作,不少小伙伴都被这个问题折了下腰,今天总结分享下实战成果.Dart是一个单线程的语言,遇到有延迟的运算(比如IO操作.延时执行)时,线程中按顺序执行的运算就会阻塞, ...

  9. 不使用回调函数的ajax请求实现(async和await简化回调函数嵌套)

    在常规的服务器端程序设计中, 比如说爬虫程序, 发送http请求的过程会使整个执行过程阻塞,直到http请求响应完成代码才会继续执行, 以php为例子 $url = "http://www. ...

随机推荐

  1. What is Double Spending & How Does Bitcoin Handle It?

    https://coinsutra.com/bitcoin-double-spending/ Bitcoin is gaining rapid popularity and adoption acro ...

  2. 更改Xamarin Android App名称

    更改Xamarin Android App名称   Xamarin Android生成的App名称默认和项目名一致.修改该名称有两种方式.   第一种方式:右击Android项目,选择“属性”命令,然 ...

  3. 【计算几何】【二分】【随机增量法】hdu6167 Missile Interception

    n个半径为R的圆是否有公共部分,等价于询问是否存在一个半径小于R的圆,能覆盖所有n个圆的圆心. 对这n个点求最小圆覆盖即可.从网上扒了个随机增量法的代码. 这样算上二分,复杂度就是nlogn了. #i ...

  4. 【数位dp】UVA - 11361 - Investigating Div-Sum Property

    经典数位dp!而且这好像是数位dp的套路板子……不需要讨论原来我很头疼的一些边界. 改天用这个板子重做一下原来的一些数位dp题目. http://blog.csdn.net/the_useless/a ...

  5. Problem D: 零起点学算法95——弓型矩阵

    #include<stdio.h> #include<string.h> int main() { ][]; while(scanf("%d%d",& ...

  6. jquery 封装的ajax调用

    (function(){    var Ploy = {        Config: {            ajaxUrl: "/ajax/ploy.ashx"        ...

  7. Web API使用记录系列(三)Web API与Owin

    还好在坚持,今天继续更新第三篇随笔----使用owin来启动WebAPI(这里还是以IIS为宿主,当然也可以使用别的如Console.Windows Server等) 关于OWIN(Open Web ...

  8. Java将字符串写入文件与将文件内容读取到字符串

    原文:http://blog.csdn.net/liuweiyuxiang/article/details/69487326 将字符串写入文件 方法一 public void WriteStringT ...

  9. openGl 基础

    最近由于手机项目中需要用到OpenGL ES的知识,所以这段时间正在研究OpenGL的相关知识.因为OpenGL ES是OpenGL的剪裁版本,所以我直接从OpenGL入手,然后再去看OpenGL E ...

  10. easyui combobox可编辑的情况下,只能首字母开始过滤的问题选项

    esayui中的combobox下拉列表在可编辑的情况下可以输入内容来过滤下拉框的选项,而1.4.2版本只能在从首字母开始过滤例如其中一个选项是"test", 只能输入" ...