一、回调函数
这是异步编程最基本的方法
假如有两个函数f1和f2,后者等待前者的执行结果。如果f1是一个很耗时的任务,可以考虑改写f1,把f2写成f1的回调函数。
function f1(callback) {
setTimeout(function () {
callback();
},1000);
}
f1()f2;
采用这种方式,我们把同步操作变成了异步操作,f1不会堵塞程序的运行,相当于先执行程序的主要逻辑,将耗时的操作推迟执行。
回调函数:优点是简单、容易理解和部署。
缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数。
二、事件监听
采用事件驱动模式,任务的执行不取决于代码的顺序,而取决于某个事件的发生。
以f1和f2为例。先为f1绑定事件
f1.on('done', f2);
function f1(){
setTimeout(function () {
// f1的任务代码
f1.trigger('done');
}, 1000);
}
f1.trigger(‘done’)表示,执行完成之后,立即触发done事件,从而开始执行f2.
事件监听:优点是可以绑定多个事件,每个事件可以指定多个回调函数,而且可以“去耦合”(Decoupling),有利于实现模块化。
缺点是整个程序都要变成事件驱动型,运动流程会变得很不清晰。
三、发布、订阅
发布订阅模式,又称观察者模式。
发布/订阅,性质与“事件监听类似”,但是明显优于后者,因为我们可以通过查看”消息中心“,了解存在多少信号,多少个订阅者,从而监听程序的运行。
四、Promise对象
Promises对象是CommonJs工作提出的一种规范,目的是为了异步编程提供统一接口
promise的优点在于回调函数变成了链式写法,程序流程看的很清楚,而且配套齐全,可以实现很强大的功能。
五、生成器函数Generator/yield
yield表达式可以暂停函数执行,next方法用于恢复函数执行,这使得Generator函数非常适合将异步任务同步化。
yield表达式本身没有返回值,或者说总是返回undefined。next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值。
每个yield返回的是{value:yield返回的值,done:true/false(执行状态)}
function *generatorDemo() {
yield 'hello';
yield 1 + 2;
return 'ok';
}
var demo = generatorDemo()
demo.next() // { value: 'hello', done: false }
demo.next() // { value: 3, done: false }
demo.next() // { value: 'ok', done: ture }
demo.next() // { value: undefined, done: ture }
Generator并不是为异步而设计出来的,它还有其他功能(对象迭代、控制输出、部署Interator接口…)
六、async/await 函数的实现
async是“异步”的意思,而 await 是等待的意思。所以应该很好理解 async 用于申明一个 异步的function (实际上是asnyc function 对象)
await 用于等待一个异步任务执行完成的结果,并且await只等出现在 async 函数中
一个函数如果加上 asnyc,那么该函数就会返回一个 Promise
async function async1() {
return "1"
}
console.log(async1()) // -> Promise {<resolved>: "1"}
async函数返回的是一个 Promise 对象,可以使用 then 方法添加回调函数,async 函数内部 return 语句返回的值,会成为 then 方法回调函数的参数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。
1.await命令后面返回的是 Promise 对象,运行结果可能是rejected,所以最好把await命令放在try…catch代码块中。
async function test(){
let newTime
= await new Promise((resolve,reject)=>{//这里等待异步返回结果,再继续向下执行
let time = 3000;
setTimeout(()=>{
resolve(time);
},time)
})
console.log(newTime+'毫秒后执行');
let content = 'test';
console.log(content); //3s后,先输出 “3000毫秒后执行”,再输出 "test"
}
test()
总结:
简简单单的六种方法:
js 异步编程的进化史:callback -> promise -> generator -> asnyc + await