下面来说一说通过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. CRT【p3868】[TJOI2009]猜数字

    Description 现有两组数字,每组k个,第一组中的数字分别为:a1,a2,...,ak表示,第二组中的数字分别用b1,b2,...,bk表示.其中第二组中的数字是两两互素的.求最小的非负整数n ...

  2. Poj1733 Parity Game(带权并查集)

    题面 Poj 题解 反正只要你判断是否满足区间的奇偶性,假设每一位要么是\(1\)要么是\(0\)好了. 假设有\(S\)的前缀和为\(sum[]\),则有: 若\(S[l...r]\)中有奇数个\( ...

  3. 树形dp入门(poj 2342 Anniversary party)

    题意: 某公司要举办一次晚会,但是为了使得晚会的气氛更加活跃,每个参加晚会的人都不希望在晚会中见到他的直接上司,现在已知每个人的活跃指数和上司关系(当然不可能存在环),求邀请哪些人(多少人)来能使得晚 ...

  4. Redux 中间件的执行顺序理解

    Redux.applyMiddleware(thunk, middleware1) 和 Redux.applyMiddleware(middleware1, thunk) 的区别: <!DOCT ...

  5. EasyUI学习总结(四)——parser源码分析(转载)

    本文转载自:http://www.cnblogs.com/xdp-gacl/p/4082561.html parser模块是easyloader第一个加载的模块,它的主要作用,就是扫描页面上easyu ...

  6. [JZOJ5426]摘Galo

    题目大意: 有一棵n个结点的树,每个点都有一个权值,你要从中选出不超过k+1个点使得权值和尽量大. 同时要注意如果一个点被选择,那么它的子树和这个点到根结点路径上的点不能被选择. 思路: 很水的树形D ...

  7. VITAM POST MORTEM – ANALYZING DEADLOCKED SCHEDULERS MINI DUMP FROM SQL SERVER

    https://gennadny.wordpress.com/2014/11/ Since SQL Server 7.0, SQL Server has its own scheduling mech ...

  8. 用windowsapi来建立一个窗口

    #include <iostream> #include <Windows.h> HINSTANCE g_hInstace = ; LRESULT CALLBACK Windo ...

  9. ocx控件打印之基础篇

      Visual C++6.0是开发Windows应用程序的强大工具,但是要通过它实现程序的打印功能,一直是初学者的一个难点,经常有朋友询问如何在VC中实现打印功能,他们往往感到在MFC提供的框架内实 ...

  10. git log --oneline --graph的读法

    星号表明这个提交所在的分支: 最左边的直线表示当前分支的历史状态,从图看,当前分支HEAD是master分支 :提交历史是:8cfbb25<--d486463<--a88c595<- ...