异步的含义
异步(async)
是相对于同步(sync)
而言的
- 同步是一件事一件事的执行。只有前一个任务执行完毕,才能执行后一个任务
- 当JS引擎顺序执行到一个异步任务时,会把这个任务挂起,继续执行后面的代码,等到异步任务返回了结果,再执行下去
setTimeout 就是一个异步任务
console.log(1)
setTimeout(() => {
console.log(2)
}, 1000)
console.log(3)
// 1
// 3
// 2
在执行到setTimeout的时候,JS并不会傻呵呵的等着1000ms执行回调函数,而是会继续执行后面的代码
Promise
ES6新增的API,是一个构造函数,容器中存放了一个异步任务,作用将异步操作以同步的流程表达出来,避免了层层嵌套的回调函数(俗称“回调地狱”)
// 回调写法
function fun1(value, callback) {
value++
setTimeout(() => {
value++
setTimeout(() => {
value++
setTimeout(() => {
value++
callback(value)
}, 1000)
}, 1000)
}, 1000)
}
fun1(1, (res) => console.log(res))
// 5
//Promise写法
function fun2(value) {
return new Promise((resolve,reject) => {
setTimeout(() => {
resolve(++value)
}, 1000)
})
}
fun2(1)
.then(res => {
return fun2(res)
})
.then(res => {
return fun2(res)
})
.then(res => {
return fun2(res)
})
.then(res => {
console.log(res)
})
// 5
由上面代码可以看出 promise将多个回调函数嵌套的回调地狱 ,变成了链式的写法 ,可读性更高写法也更清晰
Generator
Generator 函数是一个状态机,封装了多个内部状态 , 执行 Generator 函数会返回一个遍历器对象 , 可以依次遍历 Generator 函数内部的每一个状态
特征:
function
关键字与函数名之间有一个星号- 函数体内部使用
yield
表达式,定义不同的内部状态(yield
在英语里的意思就是“产出”)
注意:yield
表达式只能用在 Generator 函数里面,用在其他地方都会报错
function fun3(value) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(value)
}, 1000)
})
}
function* gen() {
let res = 1
yield fun3(++res)
yield fun3(++res)
yield fun3(++res)
yield fun3(++res)
}
let fn = gen()
fn.next()
fn.next()
fn.next()
const res = fn.next().value
res.then(result => console.log(result))
// 5
/*
* 也可以通过for -of 一次执行Generator函数的next方法
* 进而来执行每个getPromise方法
*/
for (const res of gen()) {
res.then(result => {
console.log(result)
})
}
// 2
// 3
// 4
// 5
async
相当于自执行的Generator函数,相当于自带一个状态机,在await的部分等待返回, 返回后自动执行下一步,不需要链式调用,只要用同步的写法就可以了。
async
函数对 Generator 函数的改进,体现在以下四点
- 内置执行器,调用就执行, 不像 Generator 函数,需要调用
next
方法 - 更好的语义,
async
表示函数里有异步操作,await
表示紧跟在后面的表达式需要等待结果 - 更广的适用性
- 返回值是 Promise,Generator 函数的返回值是 Iterator 对象,
async
函数可以用then
方法指定下一步的操作
function fun4(value) {
return setTimeout(() => {
++value
}, 1000)
}
async function asy() {
let res = await fun4(1)
res = await fun4(res)
res = await fun4(res)
res = await fun4(res)
res = await fun4(res)
console.log(res)
}
asy()
// 5
总的来说,async和generator函数主要就是为了解决异步的并发调用使用的 ,相比promise的链式调用,传参更加方便,异步顺序更加清晰