JavaScript异步的四种⽅式
JavaScript的四种常⽤异步操作⽅式:callback、Promise、Generator、asnyc/await
⼀、callback回调函数
回调是⼀个函数作为参数传递到另⼀个函数⾥，在那个函数执⾏完后再执⾏。
function f1 (callback) {
setTimeout(function () {
    console.log("1")
callback();
},1000);
}
function f2(){
console.log("2")
}
f1(f2);
缺点是会陷⼊回调地狱。
⼆、Promise(ES6)
Promise对象代表⼀个异步操作，有三种状态：pending(进⾏中),resolved(已成功)和rejected(已失败)。
⼀旦状态改变，就不会再变，任何时候都可以得到这个结果。状态改变只有两种可能：pending=>resolved,pending=>rejected。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
await和async使用方法} else {
reject(error);
}
});
Promise实例⽣成以后，可以⽤then⽅法分别指定resolved状态和rejected状态的回调函数。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then⽅法接收两个回调函数，第⼀个回调函数是Promise对象的状态变为resolved时调⽤。第⼆个回调函数是Promise对象的状态变为rejected时调⽤。
缺点是：
⽆法取消Promise，⼀旦新建就⽴即执⾏，⽆法中途取消。
不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当初与pending状态时，⽆法得知⽬前进展到哪⼀个阶段(刚刚开始还是即将完成)
三、Generator(ES6)
function* G() {
const a = yield 100
console.log('a', a)  // a aaa
const b = yield 200
console.log('b', b)  // b bbb
const c = yield 300
console.log('c', c)  // c ccc
}
const g = G()
<()    // value: 100, done: false
<('aaa') // value: 200, done: false
<('bbb') // value: 300, done: false
<('ccc') // value: undefined, done: true
相⽐Promise，Generator流程更加直观、语义化。
Generator的问题在于，函数的执⾏需要执⾏器每次都需要通过g.next()⽅式执⾏。
四、async/await(ES2017)
async function testResult() {
let first = await doubleAfter2seconds(30);
let second = await doubleAfter2seconds(50);
let third = await doubleAfter2seconds(30);
console.log(first + second + third);
}
asnyc函数解决了上述问题，流程清晰、直观、语义明显。
同时asnyc函数⾃带执⾏器，执⾏的时候⽆需⼿动加载。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。