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中的數據。