async 是函数修饰符
//当给一个函数加上async修饰符时,这个函数返回值就是一个promise,并且自动resolve
//如果函数有返回值xxx,则async返回是的promise.resolve(xxx)
//如果函数没有返回值，则async返回是的promise.resolve(undefined)
async function testAsync(){
//return 'hello, async'
console.log('async function')
}
const res = testAsync().then((val) => {
//当return 'hello, async'时，这里打印 'hello, async'
//当没有return 时，这里打印 undefined
console.log(val)
})
//这里不管有没有返回值，都会打印[[PromiseState]]: "fulfilled"
//console.log(res)
await 在等待一个结果返回[这个结果任意，不一定是promise.resolve()的值,但函数必须有return才会异步]
下边的demo 说明:
1 test函数内作为一个整体对外是异步的，但在test函数内是同步执行的
2 如果await的不是一个promise，则因为是async函数，比如getSomething(),async test调用还是异步的,先打印'同步',再打印test()
function getSomething() {
//console.log('getSomething')
return 'something'
}
//如果函数返回promise，则不用加async
function testAsync(){
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello async 666')
}, 2000)
})
}
async function test(){
//test函数内作为一个整体对外是异步的，但在test函数内是同步执行的
//如果await的不是一个promise，则因为是async函数，并且函数有返回值，则test调用还是异步的,先打印'同步',再打印test()里的代码
//当然，如果getPromise()没有返回值，比如语句中只有console.log('getSomething')则执行test()会先打印这个语句，即说明await等的是函数return的返回值，如果没有返回值是不等的
const v1 = await getSomething() //await等待普通函数返回
//const v2 = await testAsync()//await等待promise返回
console.log(v1)
//console.log(v2)
}
test()
//testAsync()
console.log('同步')
思考以下代码输出结果
function getSomething() {
//return 'something'
setTimeout(() => {
console.log('getSomething log')
return 'something'
},1000)
}
//如果函数返回promise，则不用加async
function testAsync(){
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello async 666')
}, 2000)
})
}
async function test(){
const v1 = await getSomething()
const v2 = await testAsync()
console.log('test')
console.log(v1)
console.log(v2)
console.log(v1)
}
test()
//testAsync()
console.log('同步')
//getSomething log
// test
// undefined //这里是undefined,why ?
// hello async 666
// undefined
上边可以看到 await getSomething() 是通过setTimeout异步返回的，函数返回值也是在setTimeout中返回的，上边说了test()函数内的代码是同步执行的，异步return 的result，同步运行的时候值是undefined
javascript串行任务,方法一，使用 promise.then()
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => {
resolve(n + 200)
}, n)
})
}
function step1(n) {
console.log(`step1 with ${n}`)
return takeLongTime(n)
}
function step2(n) {
console.log(`step2 with ${n}`)
return takeLongTime(n)
}
function step3(n) {
console.log(`step3 with ${n}`)
return takeLongTime(n)
}
function doJob() {
console.log('just do it')
const time1 = 300
step1(time1)
.then(time2 => step2(time2))
.then(time3 => step3(time3))
.then(result => {
console.log(`result is ${result}`)
})
}
doJob()
javascript串行任务,方法二，使用 async/await
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => {
resolve(n + 200)
}, n)
})
}
function step1(n) {
console.log(`step1 with ${n}`)
return takeLongTime(n)
}
function step2(n) {
console.log(`step2 with ${n}`)
return takeLongTime(n)
}
function step3(n) {
console.log(`step3 with ${n}`)
return takeLongTime(n)
}
async function doJob() {
console.log('just do it')
const time = 300
const time1 = await step1(time)
const time2 = await step2(time1)
const time3 = await step3(time2)
console.log(`result is ${time3}`)
}
doJob()
javascript串行任务, 并且后一步需要前边所有步骤的返回值,方法一，使用 async/await
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => {
resolve(n + 200)
}, n)
})
}
function step1(n) {
console.log(`step1 with ${n}`)
return takeLongTime(n)
}
function step2(m, n) {
console.log(`step2 with ${m} and ${n}`)
return takeLongTime(m + n)
}
function step3(k, m ,n) {
console.log(`step3 with ${k}, ${m} and ${n}`)
return takeLongTime(k + m + n)
}
async function doJob() {
console.log('just do it')
const time1 = 300
const time2 = await step1(time1) // 500
const time3 = await step2(time1, time2) // 1000
const result = await step3(time1, time2, time3) //2000
console.log(`result is ${result}`)
}
doJob()
javascript串行任务, 并且后一步需要前边所有步骤的返回值,方法二，使用 promise.then()
这种操作给人感觉地狱回调的感觉
function takeLongTime(n) {
return new Promise(resolve => {
setTimeout(() => {
resolve(n + 200)
}, n)
})
}
function step1(n) {
console.log(`step1 with ${n}`)
return takeLongTime(n)
}
function step2(m, n) {
console.log(`step2 with ${m} and ${n}`)
return takeLongTime(m + n)
}
function step3(k, m ,n) {
console.log(`step3 with ${k}, ${m} and ${n}`)
return takeLongTime(k + m + n)
}
function doJob() {
console.log('just do it')
const time1 = 300
step1(time1)
.then((res1) => {
step2(time1, res1)
.then(res2 => {
step3(time1,res1, res2)
.then(result=> {
console.log(result)
})
})
})
}
doJob()
本文由 dealdot ＜dealdot＃163.com＞ 创作, Full Stack Developer @ DeepBlue
本文最后编辑时间为: Apr 15, 2021 at 17:46 pm
转载请注明来源