async是es6明确提出的一类捷伊触发器句法. 一已经开始es为的是化解触发器,采用的是promise, 但看见科姬的then后,就觉得他们傻逼了. 而后明确提出了generator, 在下层同时实现了两个触发器的商业模式, 但须要全自动继续执行. 有关怎样采用generator,能参照,how to use generator. 责任编辑这儿,不深入探讨是不是采用generato. 而要,假如采用generator和promise 内部结构出async的抒发. variations前面会如是说怎样正式宣布的采用 async/await，和里头有甚么须要特别注意的文本。
单纯触发器同时实现
通常触发器的读法是,传反弹嘛,比如说:
var ajax = function(url,cb){
// send url
// get res
…
cb(JSON.parse(result))
}
这样,如果最难写出callback hell. 接着他们导入: generator
function *main() {
var result1 = yield ajax( “http://some.url.1” );
var data = JSON.parse( result1 );
var result2 = yield ajax( “http://some.url.2?id=” + data.id );
var resp = JSON.parse( result2 );
}
var async = main();
async.next();
function ajax(url){
// send url
async.next(res);
}
伪标识符的文件格式如前所述. 这儿,须要点子一条线. 假如,你没在next()中传至res,like async.next(). 所以,里头result1和result2赢得的结论是undefined.
下面是基本上的generator触发器. 那假如采用generator来演示async呢？
这估算得嘿嘿async再次出现的其原因
async why?
依照下面的导出,他们可以了解到, 采用next 继续执行句子时, 根本无法继续执行yield前面的函数. 这种导致的结论是,无法parallel触发器呀. 这种限制性还是很大的。所以,为的是化解这个问题,采用到es6明确提出的Promise对象来进行补充.
这儿,增加两个限定规则,即,ajax拉取返回的必须是两个promise对象.
function ajax(url){
return new Promise(function(res,rej){
send(url,function(result){
res(result)
})
})
}
我们再补充一下,假如采用generator来对promise进行tricky
function runGenerator(g) {
var it = g(), ret;
(function iterate(val){
ret = it.next( val );
if (!ret.done) {
// 检查是否已经then完成
if (“then” in ret.value) {
// 这一句很关键
ret.value.then( iterate );
}
else {
// 同步反弹的trick
setTimeout( function(){
iterate( ret.value );
}, 0 );
}
}
})();
}
OK, 这种, 他们就能在async里头,采用同步的读法,来代表触发器的操作了.
runGenerator(function* (){
var result = yield new Promise(function(res,rej){
setTimeout(function(){
res(ok);
},1000)
});
})
由于这儿要求的是采用promise, 所以,他们采用Promise.all([xx,xx]) 也是合情合理的. 这种就能完美的化解掉–并行触发器发送。
runGenerator(function* (){
yield Promise.all([ajax(http://villainhr.com),ajax(http://villainhr.com)])
})
对比与,采用async的结构:
(async function(){
await Promise.all([ajax(http://villainhr.com),ajax(http://villainhr.com)]);
})();
是不是感觉一毛一样呢？ 不过在实际上操作中, async 还必须对new Promise进行兼容处理. 假如其他人直接传至两个expression, 你也必须保证他是可行的.
在babel中,讲的其实也是这种一个逻辑:
// In
async function foo() {
await bar();
}
// Out
var _asyncToGenerator = function (fn) {
…
};
var foo = _asyncToGenerator(function* () {
yield bar();
});
具体参照: babel es6 转码
更多文本能关注公众号：前端小吉米 ，赢得 “看似稳如老狗，实则慌的一批” villainhr 对对前端的个人观点解说文章和各种小道消息工程实践 async
前面已经基本上如是说怎样采用 async 这儿，单纯如是说一下怎样在工程中接入 async。这儿，他们以 webpack 为例，只须要额外下载 stage-3，并修改配置即可。
# 下载 stage-3
npm install babel-preset-stage-3 –save-dev
# 修改 config 配置
module: {
loaders: [{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, src)
],
loader: babel-loader,
query: {
presets: [es2015, stage-3, react],
}
}]
}
不过，下面那种是针对浏览器环境比较好的条件下，通常来说，假如针对一些低版本浏览器，还须要采用 stage-0 的配置，所以读法就如果改成。
entry: [babel-polyfill, ./test.js],
loaders: [
{ test: /\.jsx?$/, loader: babel, exclude:/node_modules/,
presets: [es2015,stage-0, react],
}
]
在具体采用 async 时，会遇到各种采用 case，这儿他们按照顺序，来单纯的描述一下。
基础采用
在采用 await 时，须要特别注意，其修饰的是两个 Promise 对象 或者 async 函数，无法修饰非触发器对象。并且，采用 await 时，外部块级作用域一定须要采用 async 进行包裹。
function promiseFunc () {
return fetch(https://api.github.com/whatever)
.then((data) => {
return data.status;
});
}
async function AsyncFunc () {
const data = await promiseFunc ();
console.log(data);
return data;
}
async function wrap() {
const data = await AsyncFunc ();
console.log(data);
}
reject 错误捕获
采用 async 时，捕获 Promise 中的错误读法有两种，一类是直接采用 try-catch 进行捕获，一类是直接通过 catch() 来捕获。
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
// 另一类读法
async function myFunction() {
await somethingThatReturnsAPromise().catch(function (err){
console.log(err);
});
}
并行 async
采用并行 async 时，能直接利用 Promise.all 继续执行即可：
const [foo, bar] = await Promise.all([getFoo(), getBar()]);
非 async 修饰时调用 await
正常情况下，采用 await 是须要包裹在async 这种才能利用 generator 来暂停当前块级作用域。否则的话，他会直接按照触发器的商业模式，顺序继续执行。
async A(v) {
console.log(class A);
return await Promise.resolve();
}
async B(foo) {
console.log(class B);
return await Promise.resolve();
}
A().then(()=>{console.log(“1”)})
B().then(()=>{console.log(“2”)})
# 只会输出
A
B
1
2
假如要保证顺序继续执行的话，则须要采用 async 进行包裹。
(asycn function test(){
await A();
console.log(“1”)
await B();
console.log(“2”)
})()
常用技巧
检测浏览器支持 async
有时候须要了解两个浏览器是否支持 async ，接着针对不同的触发器读法来做相关的兼容。这时，触发器检测特性就显得极为重要。那怎样快速用同步的方式在浏览器里头检测是否支持 async，能直接通过 new Function(xxx) 的方式来做。直接看标识符吧：
function asyncDetect(){
try {
new Function(async function test() {})();
} catch (e) {
return false;
}
return true;
}
假如你须要检测是否支持 generator 的话，能直接采用：
function generatorDetect (){
try {
new Function(function* test() {})();
} catch (e) {
return false;
}
return true;
}
参照
async/await 采用 async rejected 的采用
