Javascript 为什么只有两次处决，而我只发送了一次？Vue 3合成API，Django REST JWT

因此，在使用axios将POST请求成功发送到Django rest API以获取令牌之后，我得到了一个200响应，其中包含刷新和访问令牌，这些令牌存储在本地存储器中。问题是有第二个POST请求，在“网络”选项卡中也是成功的。当我只提交一次表格时，为什么会有两个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>

认证1
登录
从“vue”导入{ref}；
从“axios”导入axios；
导出默认值{
设置（）{
const username=ref（“aleksisDjango”）；
const password=ref（“zimbabwe123”）；
const ACCESS_TOKEN=“ACCESS_TOKEN”；
const REFRESH\u TOKEN=“REFRESH\u TOKEN”；
const TOKEN_URL=”http://127.0.0.1:8000/api/token/";
const tokenRequest=axios.create({
baseURL:TOKEN_URL，
超时：5000，
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”，
},
});
常量登录用户=（用户名、密码）=>{
const loginBody={username，password}；
返回令牌请求
.post（“http://127.0.0.1:8000/api/token/“，登录体）
。然后（（响应）=>{
window.localStorage.setItem（ACCESS\u令牌、response.data.ACCESS）；
window.localStorage.setItem（REFRESH\u令牌、response.data.REFRESH）；
//console.log（response.data）
控制台日志（“完成”）；
//该行在命令行中执行两次
返回Promise.resolve（response.data）；
})
.catch（（错误）=>{
console.log（错误）；
返回承诺。拒绝（错误）；
});
};
返回{
用户名，
密码，
登录用户，
};
},
};
#认证部门{
利润率：20px 50px；
}

您的问题在于：

<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>

或

登录

<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>