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) }
}
 










 

猜你喜欢

转载自www.cnblogs.com/fancyLee/p/9268716.html
今日推荐