JavaScript异步操作汇总

101 阅读 0 评论 67 点赞

我是靠谱客的博主快乐绿草，这篇文章主要介绍JavaScript异步操作汇总，现在分享给大家，希望可以做个参考。

概述

Javascript语言的执行环境是”单线程”(single thread)。所以异步编程对 JavaScript 语言太重要。如果没有异步编程，根本没法用，非卡死不可。本文介绍js中三种不同的异步方式，Promise, Generator, Async。通过对比三种异步方式的特点，让大家更加优雅地使用异步操作。

在ES6之前是怎么写异步操作的：
我们用setTimeOut来做模拟异步

复制代码

1
2
3
4
5
6
7
function mockAsync(cb, time) {
console.log("before aync.......");
setTimeout(()=>{
console.log("after aync.......")
cb();
}, time)
}

上面是只有一个异步，如果我们想要串行执行一些事情，那么代码就要这么写

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
mockAsync(()=>{
console.log("mock async 1")
mockAsync(()=>{
console.log("mock async 2")
mockAsync(()=>{
console.log("mock async 3")
mockAsync(()=>{
console.log("mock async 4")
}, 1000)
}, 1000)
}, 1000)
}, 1000)

这样在回调里执行回调，就是传说中的回调地狱
通过回调实现异步，优点是简单、容易理解和部署，缺点是不利于代码的阅读和维护，各个部分之间高度耦合（Coupling），使得程序结构混乱、流程难以追踪（尤其是回调函数嵌套的情况），而且每个任务只能指定一个回调函数。

Promise

promise本身并没有解决回调地狱的问题，它的本质仍然是传递回调，例如上面的例子，用promise写是这样的

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
function usePromise(time){
console.log("before async.......");
return new Promise((resolve, reject)=>{
console.log("11111");
setTimeout(()=>{
console.log("after async.......")
resolve();
}, time)
});
}
usePromise(1000).then(()=>{
console.log("use promise");
})

输出：

复制代码

1
2
3
4
before async.......
11111
after async.......
use promise

我们继续实现串行异步，代码就会是这样

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
usePromise(1000).then(()=>{
console.log("use promise 1");
usePromise(1000).then(()=>{
console.log("use promise 2");
usePromise(1000).then(()=>{
console.log("use promise 3");
usePromise(1000).then(()=>{
console.log("use promise 4");
})
})
})
})

但是promise并没有这么笨，所以它做了一些改进,这样写会好看很多

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
usePromise(1000).then(()=>{
console.log("use promise 1");
return usePromise(1000);
}).then(()=>{
console.log("use promise 2");
return usePromise(1000);
}).then(()=>{
console.log("use promise 3");
return usePromise(1000);
}).then(()=>{
console.log("use promise 4");
})

这是基于promise的一项特性，那就是then和catch方法都是返回了一个新的promise，我们暂时称他为p1， p1这个promise会在什么时候改变状态呢？如果在then或者catch方法return了一个普通对象（没有return语句相当于return undefined），那么p1的状态会马上改变。如果then或者catch方法return了一个promise p2，那么只有当p2的状态改变了，p1的状态才会改变。

所以这个代码就好理解了，这就是利用在then函数里return一个新的promise，之后的then就是依次处理前一个promise的。

关于then和catch的细节，以及promise.all() promise.race, promise.resolve, promise.reject可以参考阮一峰的教程。

Generator

Promise并没有改变异步的实现方式，他还是通过传递回调实现的。但Generator改变了异步的实现方式，generator可以将异步的代码以同步的方式来实现，很好地实现了异步操作的流程控制。

复制代码

1
2
3
4
5
6
function* useGenerator(){
yield console.log("use generator 1");
yield console.log("use generator 2");
yield console.log("use generator 3");
yield console.log("use generator 4");
}

普通的函数想要实现异步，必须通过回调，因为普通的函数会一直执行到return语句，然后整个函数结束。

generator函数只有调用next语句才会执行，每次执行到yield语句为止，然后在需要的时候再次调用next语句，从上次结束的位置继续执行。

上面代码中，操作都是立即执行，所以虽然是异步，但看起来不像，所以我们在它的基础上写一个看起来更像异步的，仍然用setTimeout来模拟异步

复制代码

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
function delay(time) {
console.log("in delay...");
return new Promise((resolve)=>{
setTimeout(()=>{
console.log("will resolve");
resolve("aaa");
}, time);
});
}
function* useGenerator1(){
console.log("use generator 1")
let a = yield delay(1000);
console.log("test sign");
console.log("use generator 2")
let b = yield delay(1000);
console.log("use generator 3")
let c = yield delay(1000);
console.log("use generator 4")
let d = yield delay(1000);
}
let iter = useGenerator1();
let result = iter.next();
console.log("before async.....");
result.value.then(()=>{
console.log("after async.....2");
iter.next();
})

打印结果

复制代码

1
2
3
4
5
6
7
8
9
10
11
use generator 1
in delay...
before async.....
(1s之后)
will resolve
after async.....2
test sign
use generator 2
in delay...
(1s之后)
will resolve

我们通过yield返回一个promise，当这个promise改变状态后，执行这个generator函数的next方法。我们可以把所有的异步操作都想象成是一个promise，显然promise改变状态前和改变状态后执行的代码，在generator函数里是连续写着的，就像同步代码一样，只要在每次需要中断的时候使用yield语句就可以了。

如果想要generator函数自动执行完，需要实现thunk函数，例如如下代码，这个属于稍微高端的玩法，暂时可以先忽略。

复制代码

1
2
3
4
5
6
7
8
9
10
11
function thunk(iter) {
let result = iter.next();
if(result.done) {
return;
}
result.value.then(()=>{
thunk(iter);
});
}
let iter = useGenerator1();
thunk(iter);

打印结果

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
use generator 1
in delay...
will resolve
test sign
use generator 2
in delay...
will resolve
use generator 3
in delay...
will resolve
use generator 4
in delay...
will resolve

async

async和await是ES2017的内容，他们可以看做完全是generator函数的语法糖，async相当于*, await相当于yield。不同的是aync函数会自动执行，直到return（前面说过，没有return语句等于return undefined）。也就是实现了我们上面写的thunk。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
async function useAsync(){
console.log("use generator 1")
await delay(1000).then(()=>{
});
console.log("use generator 2")
await delay(1000);
console.log("use generator 3")
await delay(1000);
console.log("use generator 4")
await delay(1000);
}
console.log("before async.....");
useAsync().then((result)=>{
console.log("after async....."+ result);
}).catch();

打印信息

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
before async.....
use generator 1
in delay...
will resolve
use generator 2
in delay...
will resolve
use generator 3
in delay...
will resolve
use generator 4
in delay...
will resolve
after async.....undefined