Promise 錯誤處理問題 400卻還是會執(zhí)行success的function

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

在組件中調(diào)用

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應(yīng)該要返回上面這樣的訊息, 但console 總是返回

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

這個undefined 的data卻是 action中第三行那個data,
錯誤的時候竟然也跑進(jìn)成功的callback了, 失敗的訊息卻沒有接收到,
導(dǎo)致之后組件中返回的錯誤是 Uncaught (in promise) TypeError

不知道這樣是因為我哪里操作錯誤, 還是說promise有別種錯誤處理的解法？
還請大大幫忙

回答

編輯回答

朕略萌

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那應(yīng)該繼續(xù)往回找看你login的請求是否寫的有問題

2018年6月15日 06:07

編輯回答

玄鳥

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

2017年5月6日 01:01