Promise 错误處理問題 400却还是会执行success的function

Question

action 中的login 是这样的

login: ({ commit, state }, { user }) => {
    return login(user).then(res => {
        let data = res.data
        let expires = new Date(data.expires_in)
        (...)
        return Promise.resolve(res.data)
    }, error => Promise.reject(error))
},

在组件中调用

methods: {
    login() {
        this.$store.dispatch('login', {
            user: {
                username: this.username,
                password: this.password
            }
        }).then(result => {
            (...)
        }, errorRes => {
            const errors = errorRes.response.data.error
            let messages = []

            errors.forEach(error => {
                Object.keys(error).forEach(key => {
                    messages.push(error[key])
                })
            })

            this.$message({
                showClose: true,
                message: messages.join(', '),
                type: 'error'
            })
        })
    },
}

以这个登入为例, 如果成功的话一切都非常美好, 但如果失败, 像是故意打错帐号密码(400 Bad Req)

error: [{username_password_fields: "Invalid username or password"}]

errRes应该要返回上面这样的讯息, 但console 总是返回

Uncaught (in promise) TypeError: Cannot read property 'data' of undefined

这个undefined 的data却是 action中第三行那个data,
错误的时候竟然也跑进成功的callback了, 失败的讯息却没有接收到,
导致之后组件中返回的错误是 Uncaught (in promise) TypeError

不知道这样是因为我哪里操作错误, 还是说promise有别种错误处理的解法？
还请大大帮忙

Answer 1

login: ({ commit, state }, { user }) => new Promise((resolve, reject) => {
    login(user).then(res => {
      let data = res.data
      let expires = new Date(data.expires_in)
      (...)
      resolve(res.data)
    }, error => reject(error))
  }),

---

如果你的问题出在login的Promise那应该继续往回找 看你login的请求是否写的有问题

Answer 2

login: async ({ commit, state }, { user }) => { 
       var res = await login(user);
       let data = res.data;
       let expires = new Date(data.expires_in);
       (...)
       return res.data;   
},

methods: {
    async login () {
        try{
            let result = await this.$store.dispatch('login', {
                user: {
                  username: this.username,
                  password: this.password
                }
             }); 
             (...)
        }catch(errorRes){
            const errors = errorRes.response.data.error
            let messages = []

            errors.forEach(error => {
              Object.keys(error).forEach(key => {
                messages.push(error[key])
              })
            })

            this.$message({
                showClose: true,
                message: messages.join(', '),
                type: 'error'
            })
         }
       
    },
}