promise的一些总结

[gdutwyg]

promise与 setTimeout的混合使用

大家都知道promise是解决回调地狱的，具体的介绍文章可以看
promise-感性认知
es6-promise

这里不做过多介绍

// 简单例子
function test (ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, '完成')
  })
}
test(1000).then((res) => {
  console.log(res)
})
// tips:如果promise中不调用resolve 则then函数则不会继续执行

// 如果想配合await 和async一起使用, 怎么做？
function test (ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, '完成')
  })
}
async function a() {
  console.log('start')
  await test(1000)
  console.log('end')
}
a() // 你会看到先打印start => 执行setTimeout =>打印end


function test (ms) {
  return new Promise((resolve, reject) => {
    setTimeout(function (args){console.log(args)}, ms, 'await')
  })
}
async function a() {
  console.log('start')
  await test(1000)
  console.log('end')
} 
a() // end 不会打印

// tips:如果await 与promise 一起使用， promise 里 需要执行resolve end才能打印

function test (ms) {
  return new Promise((resolve, reject) => {
    setTimeout(function (args){console.log(args)}, ms, 'await')
  })
}
async function a() {
  console.log('start')
  await test(1000)
  console.log('end')
} 
a()

但是有个问题下面这个例子却不是按照 start => await => end 这样的顺序来打印的？
为什么？

async function a() {
  console.log('start')
  await setTimeout(function (){console.log('await')})
  console.log('end')
}
a() // start => end => await

async function a() {
  console.log('start')
   function a(){console.log('await')}
  await a()
  console.log('end')
}
a() // start => await => end

据网上的大佬说：setTimeout被放到队列里面了，所以导致这样的问题，如果是其它的普通函数就没有这个问题