在 vuejs 中使用 vuex (dispatch) 得到错误 422

Question

我收到一个错误：

422 (Unprocessable Content)

当我尝试post寄存器形式的数据时

我的 Register.vue

里有这个

  methods: {
    register() {
      this.$store.dispatch('register', {
        firstname: this.firstname,
        lastname: this.lastname,
        email: this.email,
        password: this.password,
      });
    },
  },
};

在我的 vuex 中

  actions: {
    register(credentials) {
      const requestOptions = {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        dataType: 'json',
        body: JSON.stringify(credentials),
      };
      console.log(credentials);
      return fetch('http://localhost/api/users', requestOptions)
        .then((response) => {
          return response.json;
        })
        .catch((err) => console.log(err.message));
    },
  }

有人知道我哪里错了吗？非常感谢

Answer 1

如果请求不错就不要return两次

  actions: {
    register(credentials) {
      const requestOptions = {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        dataType: 'json', // not needed 
        body: JSON.stringify(credentials),
      };
      console.log(credentials);
      return fetch('http://localhost/api/users', requestOptions) // first time
        .then((response) => {
          return response.json; // second time
        })
        .catch((err) => console.log(err.message));
    },
  }

也用async/await。我愿意

  actions: {
    async register(credentials) {
    
      const requestOptions = {
        method: 'POST',
        headers: { 'content-type': 'application/json' },
        dataType: 'json',
        body: JSON.stringify(credentials),
      };
    
      const res = await fetch('http://localhost/api/users', requestOptions);
    }

    return res.json();
  }

并且在 Register.vue

  methods: {
    register() {
      this.$store.dispatch('register', {
        firstname: this.firstname,
        lastname: this.lastname,
        email: this.email,
        password: this.password,
      }).then(data => {
        console.log(data)
      }).catch((err) => console.log(err.message));
    });
  },
};

也可以放在try/cache等，看你的。

检查docs，解释的很好。

在 vuejs 中使用 vuex (dispatch) 得到错误 422

Got error 422 with vuex (dispatch) in vuejs

fetch

vue.js

vuex