ES6 async await
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>async-await</title>
</head>
<body>
<h3>ES6 async 函数用法</h3> <script> window.onload = function() { // 例-1: 继发异步
async function f() {
try {
let a = await new Promise((resolve, reject) => {setTimeout(resolve.bind(null, 'hello'), 1000)});
console.log('a: ', a);
let b = await new Promise((resolve, reject) => {setTimeout(resolve.bind(null, 'world'), 2000)});
console.log('b: ', b);
let c = await new Promise((resolve, reject) => {setTimeout(resolve.bind(null, 'xyz'), 3000)});
console.log('c: ', c);
return c;
} catch(error) {
console.log('error: ', error);
}
}
// 继发调用: 回调嵌套, 抛出最后结果, f() 只用来作为一个流程管理器
// f().then(v => {console.log('final-result: '+ v);}).catch(e => {console.log('final-error-reason: ', e);}); // 例-2: 并发异步
async function g() {
try {
return await Promise.all([
ajax1('https://api.github.com/users/github', 'get'),
ajax2('https://api.github.com/users', 'get'),
ajax3('https://api.github.com', 'get'),
ajax4('https://api.github.com/users/chosen', 'get')
]);
} catch(error) {
console.log('error: ', error);
}
} /*
* https://api.github.com/users/github
* https://api.github.com/users
* https://api.github.com
* https://api.github.com/users/chosen
*/ // 并发调用: 全部执行完才抛出最后结果, g() 只用来作为一个流程管理器
g().then(obj => {
let[github, users, api, chosen] = obj; // 解构
let [jGithub, jUsers, jApi, jChosen] = [JSON.parse(github), JSON.parse(users), JSON.parse(api), JSON.parse(chosen)]; // 解构转成 js 对象
// 业务流程
console.log('---------- all-completed ----------');
console.log('github >>>>>>', jGithub['login']);
console.log('users >>>>>>', jUsers[0]['login']);
console.log('api >>>>>>', jApi['current_user_url']);
console.log('chosen >>>>>>', jChosen['login']);
}).catch(e => {
console.log(e);
}) } // --------------- function -------------------- // ajax1
function ajax1(url, type) {
return new Promise((resolve, reject) => {
console.log('ajax1 start~');
myAjax(url, type, null, function(data) {
console.log('ajax1-completed!');
resolve(data);
}, function(reason) {
console.log('ajax1-failed!');
reject(reason);
})
})
} // ajax2
function ajax2(url, type) {
return new Promise((resolve, reject) => {
console.log('ajax2 start~');
myAjax(url, type, null, function(data) {
console.log('ajax2-completed!');
resolve(data);
}, function(reason) {
console.log('ajax2-failed!');
reject(reason);
})
})
} // ajax3
function ajax3(url, type) {
return new Promise((resolve, reject) => {
console.log('ajax3 start~');
myAjax(url, type, null, function(data) {
console.log('ajax3-completed!');
resolve(data);
}, function(reason) {
console.log('ajax3-failed!');
reject(reason);
})
})
} // ajax4
function ajax4(url, type) {
return new Promise((resolve, reject) => {
console.log('ajax4 start~');
console.log('---------- cut-off-line ----------');
myAjax(url, type, null, function(data) {
console.log('ajax4-completed!');
resolve(data);
}, function(reason) {
console.log('ajax4-failed!');
reject(reason);
})
})
}
// 以上 4 个函数(ajax1 ~ ajax4)可以进一步封装, 但为了表达清晰, 此处不做处理 // 自定义 ajax, 类型仅限于 get 和 post, 回调函数: success/error
function myAjax(url, type, params, success, error) {
var xhr = null;
var args = null;
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
success(xhr.responseText);
} else {
error("Request was unsuccessful: "+ xhr.status);
}
}
};
xhr.open(type, url, true); // 类型, 连接, 是否异步
if (type.toLowerCase() == 'post') {
// xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 默认的表单提交
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8"); // JSON.stringify 处理后的json 键值对
args = params;
}
xhr.send(args);
}
</script>
</body>
</html>
ES6 async await的更多相关文章
- ES6 Generator vs ES6 async/await
ES6 Generator vs ES6 async/await next yield promise refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允 ...
- JS学习- ES6 async await使用
async 函数是什么?一句话,它就是 Generator 函数的语法糖. 使用场景常常会遇到,请求完一个接口,拿完值再去请求另外一个接口,我们之前回调callback函数处理,如果很多的情况下,看起 ...
- async包 ES6 async/await的区别
最基本的async 包 ApCollection.find({}).toArray(function (err, aps) { var num = 0; async.whilst( function ...
- ES6 async await 面试题
转自:https://juejin.im/post/5c0397186fb9a049b5068e54 1.题目一 async function async1(){ console.log('async ...
- javascript ES6 新特性之 Promise，ES7 async / await
es6 一经推出,Promise 就一直被大家所关注.那么,为什么 Promise 会被大家这样关注呢?答案很简单,Promise 优化了回调函数的用法,让原本需要纵向一层一层嵌套的回调函数实现了横向 ...
- 使用ES6新特性async await进行异步处理
我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点c ...
- ES6入门十一：Generator生成器、async+await、Promisify
生成器的基本使用 生成器 + Promise async+await Promise化之Promisify工具方法 一.生成器的基本使用 在介绍生成器的使用之前,可以简单理解生成器实质上生成的就是一个 ...
- (译文)学习ES6非常棒的特性——Async / Await函数
try/catch 在使用Async/Await前,我们可能这样写: const main = (paramsA, paramsB, paramsC, done) => { funcA(para ...
- es6 async和await
es7 async和await ,作为genertor函数语法糖,在使用上比generator函数方便的,Generator 函数就是一个封装的异步任务,或者说是异步任务的容器.异步操作需要暂停的地方 ...
随机推荐
- 【转载】Navicat Premium 12安装与激活
原文地址 https://www.jianshu.com/p/5f693b4c9468#comment-20147185感谢作者的无私奉献,无意侵权,如需删除请联系我!所提供的激活文件理论支持Navi ...
- es6新增的数组方法和对象
es6新增的遍历数组的方法,后面都会用这个方法来遍历数组,或者对象,还有set,map let arr=[1,2,3,4,3,2,1,2]; 遍历数组最简洁直接的方法法 for (let value ...
- css 条纹背景
先介绍文章用到的二个知识点 background-size 属性 语法 background-size: length|percentage|cover|contain; css线性渐变 linear ...
- Ubuntu setup ftp server.
http://www.cnblogs.com/bcsflilong/p/4200139.html Steps 1. Install vsftpd sudo apt-get install vsftpd ...
- BIEE入门（一）架构
BIEE作为Oracle的新的商业智能平台企业版,起源于Oracle所收购的Siebel公司,BIEE原来叫做Siebel Analytic,但是Siebel也不是它的发明者,它是Siebel在200 ...
- Struts2学习-拦截器2
1.做一个登陆页面(loginView.jsp,才用Action来访问),2.登陆成功后,可以跳转到系统的首页(index.jsp),3.首页有一个链接(testOtherAction访问其它的功能模 ...
- 【Hibernate那点事儿】—— Hibernate知识总结
前言: 上一篇简单的讲解了下Hibernate的基础知识.这里对Hibernate比较重要的一些知识点,进行总结和归纳. 手码不易,转载请注明!——xingoo 总结的知识点: 1 关于hiberna ...
- day2-基础 变量，判断，循环
1.第一个程序 print ("Hello World!") 输出: 1 Hello World 2.第一个变量 a = ( print (a) 输出: Hello World 3 ...
- POJ-1836 Alignment---LIS
题目链接: https://cn.vjudge.net/problem/POJ-1836 题目大意: 题意:令到原队列的最少士兵出列后,使得新队列任意一个士兵都能看到左边或者右边的无穷远处.就是使新队 ...
- poj 2356 抽屉原理
基本原理: n+1个鸽子放到n个笼子里,至少有一个笼子里有两只及其以上的鸽子.若有n个笼子,kn+1个鸽子,至少有一个笼子里面有k+1个鸽子: 题意:给定N个数,挑出一些数,他们和和是n的整数倍: 分 ...