async/await让你的代码更加优雅

一. 回调地狱:回调函数里面嵌套着回调函数嵌套着回调函数”,这就是被传说中的“回调地狱
callbackHell () {
const api = new Api()
let user, friends
api.getUser().then(function (returnedUser) {
user = returnedUser
api.getFriends(user.id).then(function (returnedFriends) {
friends = returnedFriends
api.getPhoto(user.id).then(function (photo) {
console.log('callbackHell', {user, friends, photo})
})
})
})
}
二. 如何优雅解决回掉地狱
1. promise chain
promiseChain () {
const api = new Api()
let user, friends
api.getUser()
.then((returnedUser) => {
user = returnedUser
return api.getFriends(user.id)
})
.then((returnedFriends) => {
friends = returnedFriends
return api.getPhoto(user.id)
})
.then((photo) => {
console.log('promiseChain', { user, friends, photo })
}).catch((err) => {
    console.error(err)
  })

}
2. await/async
async asyncAwaitIsYourNewBestFriend () {
  try {

   const api = new Api()
   const user = await api.getUser()
   const friends = await api.getFriends(user.id)
   const photo = await api.getPhoto(user.id)
   console.log('asyncAwaitIsYourNewBestFriend', { user, friends, photo })
  } catch (err) { console.error(err) }
}
 










 

posted @ 2018-07-05 15:48  一叶一菩提22  阅读(176)  评论(0编辑  收藏  举报