Contents
  1. 1. ES7之async、await
    1. 1.1. 概念…
    2. 1.2. async/await示例
    3. 1.3. async、await获得返回值
    4. 1.4. 异步函数

ES7之async、await

概念…

1
2
3
ES5 -> ECMAScript ECMAScript第五个版本
ES6 -> ECMAScript 2015
ES7 -> ECMAScript 2016

so, what ECMAScript?

https://en.wikipedia.org/wiki/ECMAScript
简言之,定制JavaScript标准的。

It was created to standardize JavaScript, so as to foster multiple independent implementations.

参考:

https://www.w3ctech.com/topic/1614

https://huangxuan.me/2015/09/22/js-version/?utm_source=caibaojian.com

async/await示例

async 是一个异步函数,await只能用在async函数内.

1
2
await表示等待返回了promise对象后再继续执行;
await后面跟的是一个promise对象(其它返回值也可以,但是会立刻执行,无意义)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//暂停
var sleep = function(time) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve();
}, time);
});
};
//测试 start函数,顺序执行
var start = async function() {
console.info("Start...");
await sleep(3000); //暂停3s
console.log("End...");
};

在浏览器控制台执行 start();,顺序输出 Start... 以及调用sleep(3000)后返回的promise对象,最后输出的是 End...

为了看清await函数功能,测试如下函数

1
2
3
4
5
var start2 = function() {
console.info("Start...");
sleep(3000); //无await
console.log("End...");
};

直接输出:Start...End...

async、await获得返回值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var sleep = function(time) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
if (time < 2000) {
reject("10000");
} else {
resolve("ok");
}
}, time);
});
};
var test = async function() {
let res = await sleep(3000);
console.info(res);
console.info("hehe");
};
var test2 = async function() {
let res = await sleep(1000); //reject返回了一个错误
console.log(res); //控制太执行显示的是 ”Uncaught (in promise) 10000“
console.info("hehe");
};
// try catch 捕捉错误
var test3 = async function() {
try {
let res = await sleep(1000); //reject 错误
console.log(res); // 只显示reject返回值,不会提示说是 "Uncaught"
console.info("hehe"); //不会执行
} catch (err) {
console.error(err);
}
};

引申:当需要顺序执行HTTP请求,需要根据第一个请求的返回然后执行后续的操作时,可以将请求封装一个Promise对象传给下一个处理函数(如这里的test)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var httpRequest = function(URL) {
return new Promise(function(resolve, reject){
var x = $.ajax({
type: "GET",
url: URL,
});
/*
x.done(function(res){
if(res.error.returnCode == "0")
resole(res.data);
reject(res.error.returnCode);
});
*/
if(x)
resolve(x);
reject("10000");
});
}
var req = async function() {
try {
console.log("开始请求");
//var res = await httpRequest("http://www.baidu.com"); //因为在浏览器端存在跨域
let res = await httpRequest("http://localhost/sites/JDBToolsPlatform/api/processQualityReport/reportDataDetail.php?beginDate=2017-06-01&endDate=2017-06-30");
console.log(res); //获得返回的数据
//console.log(typeof res); //返回的json类型:string
//console.log(JSON.parse(res).error.returnCode); //获取返回状态码
console.log("请求结束。。。");
}catch (err) {
console.log(err);
}
};

异步函数

客户端fetch API, 一种替代 XMLHttpRequest 检索文件的方案.

1
2
3
4
5
6
7
8
9
10
async function fetchJson(url) {
try {
let request = await fetch(url); //fetch函数返回的就是一个Promise对象
let text = await request.text();
return JSON.parse(text);
}
catch (error) {
console.log(`ERROR: ${error.stack}`);
}
}
1
2
3
4
5
6
7
var t = fetchJson("http://localhost/sites/JDBToolsPlatform/api/processQualityReport/reportDataDetail.php?beginDate=2017-06-01&endDate=2017-06-30");
// console.inf(typeof t); // "object" t是一个Promise对象
t.then(obj => console.log(obj)); //输出的json串
t.then(obj => console.log(obj.error)); //error信息
t.then(obj => console.log(obj.data)); //data信息
t.then(obj => function(){alert(obj.error);}());

Creative Commons License
本文由Lomo创作和发表,采用Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License进行许可.
转载请注明作者及出处,本文作者为Lomo,本文标题为async await ES7.
Contents
  1. 1. ES7之async、await
    1. 1.1. 概念…
    2. 1.2. async/await示例
    3. 1.3. async、await获得返回值
    4. 1.4. 异步函数