当我只发送一次时，为什么会有 2 次 POST 执行？ Vue 3 组合 API，Django REST JWT答案

【问题标题】：Why are there 2 POST executions , when i send them only once? Vue 3 Composition API, Django REST JWT当我只发送一次时，为什么会有 2 次 POST 执行？ Vue 3 组合 API，Django REST JWT
【发布时间】：2020-11-14 22:16:50
【问题描述】：

因此，在使用 axios 向 Django REST API 发送一个成功的 POST 请求以获取令牌后，我得到一个带有刷新和访问令牌的 200 响应，这些令牌存储在本地存储中。问题是有第二个POST请求，在network选项卡中也是成功的。为什么我只提交一次表单时有 2 个 POST 请求？

<template>
  <div>
    auth 1
    <div id="authenticationDiv">
      <form action="" v-on:submit.prevent="loginUser(username, password)">
        <!-- <input type="text" v-model="username" /> -->
        <!-- <input type="text" v-model="password" /> -->
        <button @click="loginUser(username, password)">
          login
        </button>
      </form>
    </div>
    <div></div>
  </div>
</template>

<script>
import { ref } from "vue";
import axios from "axios";

export default {
  setup() {
    const username = ref("aleksisDjango");
    const password = ref("zimbabwe123");

    const ACCESS_TOKEN = "access_token";
    const REFRESH_TOKEN = "refresh_token";

    const TOKEN_URL = "http://127.0.0.1:8000/api/token/";

    const tokenRequest = axios.create({
      baseURL: TOKEN_URL,
      timeout: 5000,
      headers: {
        "Content-Type": "application/json",
        accept: "application/json",
      },
    });

    const loginUser = (username, password) => {
      const loginBody = { username, password };
      return tokenRequest
        .post("http://127.0.0.1:8000/api/token/", loginBody)
        .then((response) => {
          window.localStorage.setItem(ACCESS_TOKEN, response.data.access);
          window.localStorage.setItem(REFRESH_TOKEN, response.data.refresh);
          // console.log(response.data)
          console.log("done");
          // this line is executed twice in the command line
          return Promise.resolve(response.data);
        })
        .catch((error) => {
          console.log(error);
          return Promise.reject(error);
        });
    };

    return {
      username,
      password,
      loginUser,
    };
  },
};
</script>

<style scoped>
#authenticationDiv {
  margin: 20px 50px;
}
</style>

【问题讨论】：

标签： javascript vue.js django-rest-framework

【解决方案1】：

你的问题在这里：

<form action="" v-on:submit.prevent="loginUser(username, password)">
        <!-- <input type="text" v-model="username" /> -->
        <!-- <input type="text" v-model="password" /> -->
        <button @click="loginUser(username, password)">
          login
        </button>
      </form>

当您单击button 时您正在发出请求，而在提交表单时您正在发出另一个请求。要解决此问题：

<form action="" v-on:submit.prevent="loginUser(username, password)">
        <!-- <input type="text" v-model="username" /> -->
        <!-- <input type="text" v-model="password" /> -->
        <button>
          login
        </button>
      </form>

或者

<form action="#">
        <!-- <input type="text" v-model="username" /> -->
        <!-- <input type="text" v-model="password" /> -->
        <button @click="loginUser(username, password)">
          login
        </button>
      </form>

【讨论】：