vue promise/async/await 區別與聯繫_vue中的方法添加了async和不添加的区别-CSDN博客

本文链接：https://blog.csdn.net/software20121216/article/details/104000933

本文探讨了在Vue开发中，当处理异步请求时，如何选择使用Promise和async/await。在单一异步请求且仅需错误处理的场景下，推荐使用Promise。而面对嵌套请求，async/await提供了更清晰的代码结构，避免了回调地狱。对于并发异步请求，可以利用async/await确保所有请求完成后执行特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、只有一個異步請求，且只需要做錯誤處理情況下，使用promise

  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          reject('Verification failed, please Login again.')
        }

        const { roles, name, avatar, introduction } = data

        // roles must be a non-empty array
        if (!roles || roles.length <= 0) {
          reject('getInfo: roles must be a non-null array!')
        }

        commit('SET_ROLES', roles)
        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        commit('SET_INTRODUCTION', introduction)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

2、嵌套請求用async(異步執行，不會阻塞後面代碼執行）/await（只能放在async函數裡邊）

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()

  // set page title
  document.title = getPageTitle(to.meta.title)

  // determine whether the user has logged in
  const hasToken = getToken()

  if (hasToken) {
    if (to.path === '/login') {
      // if is logged in, redirect to the home page
      next({ path: '/' })
      NProgress.done()
    } else {
      // determine whether the user has obtained his permission roles through getInfo
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          // get user info
          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
          const { roles } = await store.dispatch('user/getInfo')

          // generate accessible routes map based on roles
          const accessRoutes = await store.dispatch('permission/generateRoutes', roles)

          // dynamically add accessible routes
          router.addRoutes(accessRoutes)



...

3、併發異步請求，都完成後do something