Promise return, await return, yiled return 总结

Promise

Promise简介

• 最简单的Promise

const promise = new Promise((reslove) => {
  setTimeout(() => {
    reslove(100)
  })
})
console.log(promise)

image.png

• 处理非异步情况

const rs = new Promise((reslove) => {
  reslove(100)
})
console.log(rs)

image.png

• Promise的三种不同状态之间的转换关系

  
  
  image.png

Promise Chain

const rs = new Promise((reslove, reject) => {
  reslove(100)
})

rs.then(res => {
  return res + 1
}).then(res => {
  console.log(res)  // 101
})

Promise每次调用then 都是创建一个新的Promise对象

const rs = new Promise((reslove, reject) => {
  reslove(100)
})

const a = rs.then(res => {
  return res + 1
})
const b = a.then(res => {
  console.log(res)
})
console.log(a == b) // false

Promise#catch 其实只是 promise.then(undefined, onRejected)方法的别名
但是 then里面指定函数错误处理和 catch有什么区别呢？

Promise.resolve().then(() => {
  throw Error('error')
}, err=>{
  console.log(err)
})

Promise.resolve().then(() => {
  throw Error('error')
}).catch(err=>{
  console.log(err)
})

image.png

我们可以看出catch可以捕获到then中的错误,但是then第二个参数只能捕获上一个Promise对象的错误。原因是then方法第二个参数只能捕获当前Promise对象或上一个Promise的错误，而不能捕获then里面的错误。

async await return

• 没有return的场景

const p = new Promise((reslove, reject) => {
    setTimeout(() => {
      reslove(100)
    }, 100)
})
const ds = async () => {
  await p
}

image.png

• 加上return的场景

const p = new Promise((reslove, reject) => {
    setTimeout(() => {
      reslove(100)
    }, 100)
})
const ds = async () => {
  return await p
}

image.png

我们知道async/await 的优势在于处理 then 链,每一个then的第一个参数都是前一个promise的返回值。理解了上面的Promise Chain链就理解了async
await 是否return的区别

Geneartor yield 和return 区别

function* fn() {
  yield 123;
}
const f = fn()
console.log(f.next())
console.log(f.next())

image.png

function* fn() {
  yield 123;
  return 456
}
const f = fn()
console.log(f.next())
console.log(f.next())

image.png

Geneartor return和yield区别

• return 代表终结遍历，之后的yiled语句都失效
• 一个Geneartor函数默认是return undefined,当return有参数时候。返回return中的数据。