Vuex Action - 返回 Axios 返回错误

Posted 2023-02-22

【中文标题】Vuex Action - 返回 Axios 返回错误

【英文标题】：Vuex Action - Returning Axios return Error

【发布时间】：2019-09-23 03:17:14

【问题描述】：

。

promise 没有返回正确的值，我做错了什么？

有人可以帮助解决这个疑问。

我想在服务器后面显示错误信息。

从现在开始，我非常感谢您的关注。 谢谢。

组件

<q-form
                @submit="onSubmit"
                @reset="onReset"
              >
                <q-input outlined v-model="username" label="User" />
                <br>
                <q-input outlined v-model="password" type="password" label="Pass" />
                <br>
                <q-btn unelevated  type="submit" color="primary full-width" label="Enter" />
              </q-form>

---

    methods: 
...mapActions('auth', ['login']),
onSubmit () 
          this.login( 'username': this.username, 'password': this.password ).then(obj => 
            console.log(obj)
          ).catch(obj => 
            console.log(obj)
          )
        

---

function login ( commit, state, getters , data) 
  return axios.post(`/api/token`, 
    username: data.username,
    password: data.password
  )
    .then(response => 
      commit('setToken', response.data)
    )
    .catch(error => 
      return error
    )

POST http://localhost/api/token 400（错误请求）

【参考方案1】：

您需要定义您的函数，而不是直接将其粘贴到方法对象中：

methods: 
  ...mapActions('auth', ['login']),
  myLogin() 
    this.login( 'username': this.username, 'password': this.password ).then(obj => 
      console.log(obj)
    ).catch(obj => 
      this.error = obj;
    )
  ,

此外，您正在映射同名的操作：login，因此您需要将本地方法更改为不同的名称，这就是我将其命名为 myLogin 的原因。

创建一个名为error 的data 属性，并在您打算显示错误的组件中使用： error 。

【讨论】：

我做了一个更详细的问题。谢谢各位

好的，请同时在auth模块中显示export。

导出登录

现在我看到您收到 400 错误，因此请求可能发送得很好，但您发送的信息有误。你验证了this.username和this.password的值吗？

就是这样。 400 错误来自服务器的消息。所以我打算显示这条消息。