根据特定请求自动刷新 - VueJS、Axios答案

【问题标题】：Automatic refresh with specific request - VueJS, Axios根据特定请求自动刷新 - VueJS、Axios
【发布时间】：2019-03-26 10:47:02
【问题描述】：

在使用 VueJS 开发单页应用程序期间，我注意到 Axios 的两个不同请求的奇怪行为。

第一个请求返回一个正常的结果，可以按照我的意愿进行处理。 HTTP只是axios.create创建的对象

const initGit = {
  das: this.message,
  password: this.password
};
HTTP.post('git/initGit', qs.stringify(initGit), this.config)
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });

这个请求就像一个魅力:-)

但是，当我将第一个请求替换为以下请求时。

const body = {
  skill : this.newSkill
};
HTTP.post('git/pushGit', qs.stringify(body), this.config)
  .then(res => {
     console.log(res);
   })
   .catch(err => {
      console.log(err);
   });

它会导致页面刷新。

我的 Vue 文件的 method 部分中存在这种行为。我也试过 watch 部分，但行为是一样的。

当我在控制台中检查网络选项卡时，我绝对不明白两个请求中的一个如何在服务器响应之前导致刷新。

请帮忙！！！！ :-)

【问题讨论】：

How to avoid automatic page reload after XMLHttpRequest call?的可能重复
目前，查看这两个代码，它应该可以正常工作，但您仍然可以添加整个文件吗？
例如定义的响应interceptor 导致页面刷新？
@Hammerbot 添加以下内容onsubmit="return false;" 不足以阻止刷新。
没有拦截器@Alexander请帮忙^^

标签： vue.js axios reload

【解决方案1】：

YESSSSSSSSSSSSSSSSSSSSSSS :-) 我终于找到了解决办法！

这很聪明。事实上，我通过后端服务器应用程序修改的 JSON 被 webpack 服务器检测到，然后我的浏览器正在刷新 ^^

我很笨：-p

【讨论】：

是的，我也是这个问题！
你是怎么解决的？我在使用 axios 请求 php 上传视频时遇到同样的问题

【解决方案2】：

@varit05 这是我的 stepper 步骤的模板代码，其中包括对 watcher 的调用以实现 2 个请求。

<v-stepper-content step="3">
                        <v-form onsubmit="return false;">
                            <div class="new-skill-step">
                                <v-text-field
                                        v-model="newSkill"
                                        :rules="[rulesDas.required]"
                                        outline
                                        clearable
                                        label="New Skill"
                                        type="text"
                                        @keyup="isButtonNewSkillEnabled"
                                        @keyup.enter="sendNewSkill = ''"
                                >
                                </v-text-field>
                                <v-btn :disabled="!buttonWriteSkillEnabled" round color="primary" @click="sendNewSkill = ''">
                                    Write new skill
                                </v-btn>
                            </div>
                        </v-form>
                    </v-stepper-content>

【讨论】：