Promise與async、await

在之前我們使用各種回調(diào)的時候笋颤，嵌套一層一層又一層的乳附，不知道的以為是千層餅，你以為你寫的代碼在第二層椰弊，其實是在第五層的情況也數(shù)不勝數(shù)了许溅。后來，針對回調(diào)的問題有了我們的Promise秉版，它的出現(xiàn)讓我們的代碼變的更加的優(yōu)雅且更容易維護贤重。

異步執(zhí)行，無論對于我們?nèi)粘Ｉ钸€是代碼工作都是必不可免的清焕。而且對于Javascript中作為單線程的處理方式并蝗，必然的需要異步操作來提升自身。
Promise

const promise =function(value) {
    return new Promise(function(resolve, reject) {
    if (/* 異步操作成功 */){
      resolve(value); // 將狀態(tài)從pendding變成fulfilled
    } else {
      reject(error); // 將狀態(tài)從pendding變成rejected
    }
  }
});
promise(true).then((result)=> {
  console.log('result:',result); // 輸出 'result'
}).catch((err)=>{
  console.log('err:', err); // 輸出err錯誤信息
})
promise(false).then((result)=> {
  console.log('result:',result); // 不執(zhí)行
}).catch((err)=>{
  console.log('err:', err); // 輸出err錯誤信息
})

Promise這里就不過多的說了秸妥，基本上人手都會了滚停。

async、await
在ES2017標準中引入了 async 函數(shù)粥惧，使得異步操作變得更加方便键畴。
使用方法也相對簡單，直接在普通函數(shù)前面加上 async突雪，用來表示該函數(shù)是一個異步的函數(shù)起惕，在要異步執(zhí)行的語句前面加上 await，表示后面的表達式需要等待完成咏删。

1惹想、async 函數(shù)內(nèi)部 return 語句返回的值，會成為 then 方法回調(diào)函數(shù)的參數(shù)督函。

async function test(){
 return 'hello world!'
}
test().then(item => console.log(item))
//hello world!

2嘀粱、async 函數(shù)內(nèi)部拋出錯誤激挪，會導致返回的 Promise 對象變?yōu)?reject 狀態(tài)。拋出的錯誤對象會被 catch 方法回調(diào)函數(shù)接收锋叨。

async function test(){
  throw new Error('error')
}

test().then(
  error => console.log(error)
)
//Error: error

async的方法就讓我們可以在項目中獲取到token之后垄分，再進行其他的一些操作代碼更加的簡潔明了。

function getToken(){
  return new Promise((reslove,reject) => {
    setTimeout(() => {
      let token = 'hello world'
      reslove(token)
    }, 1000);
  })
}
function getUser(token){
  return new Promise((reslove,reject) => {
    setTimeout(() => {
      reslove(token.slice(1))
    }, 300);
  })
}
function getProductList(result){
  return new Promise((reslove,reject) => {
    if(result){
      reslove('|' + result + '|')
    } else {
      reject('error')
    }
  })
}
async function getProlist(){
  let token = await getToken()
  let result = await getUser(token)
  let lastHandle = await getProductList(result)
  console.log(token,result,lastHandle)
}
getProlist()
//hello world    ello world    |ello world|

這樣是不是就感覺異步操作就像是同步操作一樣娃磺，簡單明了锋喜。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者