js Promise 延时任务

原文链接: js Promise 延时任务

上一篇: mpvue 开发小程序 流程

下一篇: 使用环形队列触发延时任务

简单延时

使用Promise模拟延时任务

function getMsg() {
  return new Promise(
    (resolve, reject) => {
      setTimeout(() => resolve('hello promise'), 1000)
    }
  )
}


async function fun() {
  console.log('aaa')
  let ret = await getMsg()
  console.log('bbb', ret)
  return ret
}

console.log('getMsg', getMsg())
console.log('fun', fun())

其中bbb 会在1s后输出

getMsg Promise { <pending> }
aaa
fun Promise { <pending> }
bbb hello promise

all和race

function task1() {
  return new Promise(
    (resolve, reject) => {
      setTimeout(() => resolve('task1'), 1000)
    }
  )
}

function task2() {
  return new Promise(
    (resolve, reject) => {
      setTimeout(() => resolve('task2'), 500)
    }
  )
}

function task3() {
  return new Promise(
    (resolve, reject) => {
      setTimeout(() => resolve('task3'), 1500)
    }
  )
}


async function all() {
  let all = await Promise.all([task1(), task2(), task3()])
  console.log(all)
}

async function race() {
  let ret = await Promise.race([task1(), task2(), task3()])
  console.log(ret)
}

console.log('aaa')
all()
console.log('bbb')
race()
console.log('ccc')

结果分析

aaa
bbb
ccc
task2
[ 'task1', 'task2', 'task3' ]

异步的主要思想是事件循环

首先安装顺序输出

aaa

bbb

ccc

然后race中task2 执行时间最短，所以先输出

然后all执行完毕后输出三个结果