Axios PUT 和 GET 请求的问题，有时工作良好，有时效果不佳

Question

我正在使用 Axios 从服务器获取数据，我正在尝试执行 PUT 请求，我需要从 3 个表中获取数据信息才能填写表单，当我执行 PUT 时，它有时有效，有时无效，但是当我打开浏览器终端调试问题时，PUT 请求始终有效， 我还注意到另一个没有嵌套 GET 请求的组件总是工作正常，但如果这些 GET 请求没有嵌套，我就无法从服务器获取数据。

这是我的脚本代码，我不知道我做错了什么。

<template>
<div class="container-fluid">
<div style="margin:40px;background-color:rgba(255, 255, 255, 0.7);">
<div class="row">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/usuarios">Usuarios</a></li>
<li class="breadcrumb-item"><a href="/roles">Roles</a></li>
<li class="breadcrumb-item"><a v-bind:href="rol_url">{{rol_name}}</a></li>
<li class="breadcrumb-item active" aria-current="page">Editar Rol</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-md-8 offset-md-2" style="margin-bottom:80px;">
<div class="row">
<div class="col">
<button onclick="window.history.back();" class="btn btn-primary" style="background:#003e1e;border-color:#003e1e;">
<font-awesome-icon icon="arrow-left" size="lg"></font-awesome-icon>
</button>
</div>
</div>
<div>&nbsp;</div>
<div class="row justify-content-center">
<div class="col-5 align-self-center">
<form>
<div class="form-group">
<label for="rolName">Nombre del rol:</label>
<input v-model="rol_name" type="text" class="form-control" id="rolName" aria-describedby="rolName" placeholder="Nombre">
</div>
<div class="form-group">
<label for="rolModules">Modulos del rol:</label>
<multiselect v-model="rol_mod" :options="modules" :multiple="true" :close-on-select="true" :clear-on-select="false" :hide-selected="true" :preserve-search="true" placeholder="Seleccione los modulos" label="name" track-by="modulo" :preselect-first="false">
</multiselect>
</div>
<div v-for='(module, index) in rol_mod' :key='index' class="form-group">
<label for="rolModules">Permisos de {{module.name}}</label>
<multiselect v-model="module.permisos" :options="permits" :multiple="true" :close-on-select="true" :clear-on-select="false" :hide-selected="true" :preserve-search="true" placeholder="Seleccione los permisos del modulo" label="name" track-by="_id" :preselect-first="false">
</multiselect>
</div>
<div class="form-group">
<label for="rolStates">Estado del rol:</label>
<multiselect v-model="rol_state" :options="states" track-by="name" label="name" :searchable="false" :close-on-select="true" :show-labels="true" :placeholder="rol_state_get">
</multiselect>
</div>
<div class="form-group">
<label for="permitDescription">Descripción:</label>
<textarea v-model="rol_description" class="form-control" aria-label="permitDescription"
placeholder="Descripción" :rows="6" :max-rows="10"></textarea>
</div>
<div>&nbsp;</div>
<div class="row justify-content-center">
<div class="col-4 text-center">
<button class="btn btn-primary" v-on:click="submit()" style="background:#003e1e;border-color:#003e1e;">
<font-awesome-icon icon="save" size="lg"></font-awesome-icon>
Guardar
</button>
</div>
<div class="col-4 text-center">
<a class="btn btn-primary" style="background:#003e1e;border-color:#003e1e;" v-bind:href="rol_url">
<font-awesome-icon icon="times-circle" size="lg"></font-awesome-icon>
Cancelar
</a>
</div>
</div>
<div>&nbsp;</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
const axios = require('axios');
var API_IP = process.env.VUE_APP_API_IP
export default {
components: {
Multiselect
},
data () {
return {
rol_auditoria: {},
modules: [],
permits: [],
rol_name: "",
rol_state: "",
rol_state_get: "",
rol_description: '',
states: [
{ name: "Activo", activo: "true" },
{ name: "Inactivo", activo: "false" }
],
rol_mod: [],
rol_url: ""
}
},
mounted () {
axios
.get(API_IP+'/rol/'+this.$route.params.id)
.then(response => {
this.rol_auditoria = response.data.data.auditoria;
this.rol_name = response.data.data.nombre;
this.rol_state = response.data.data.activo;
response.data.data.activo? this.rol_state_get="Activo" : this.rol_state_get="Inactivo";
this.rol_description = response.data.data.descripcion
this.rol_id = response.data.data._id
this.rol_url = "/roles/"+response.data.data._id
for (var k in response.data.data.modulos){
var mod_info = {}
console.log(response.data.data.modulos[k].modulo.nombre);
mod_info["_id"] = response.data.data.modulos[k]._id
mod_info["modulo"] = { "_id" : response.data.data.modulos[k].modulo._id }
mod_info["name"] = response.data.data.modulos[k].modulo.nombre
var mod_per = []
for (var j in response.data.data.modulos[k].permisos){
var perms = {}
perms["_id"] = response.data.data.modulos[k].permisos[j]._id
perms["name"] = response.data.data.modulos[k].permisos[j].nombre
mod_per.push(perms)
}
mod_info["permisos"] = mod_per
this.rol_mod.push(mod_info)
}
axios
.get(API_IP+"/module/")
.then(response => {
for(var k in response.data.data){
var mod = {}
mod["modulo"] = { "_id" : response.data.data[k]._id }
mod["name"] = response.data.data[k].nombre;
this.modules.push(mod);
}
axios
.get(API_IP+"/permit/")
.then(response => {
for(var k in response.data.data){
var per = {}
per["name"] = response.data.data[k].nombre;
per["_id"] = response.data.data[k]._id;
this.permits.push(per);
}
});
});
})
},
methods: {
submit: function() {
axios
.put(API_IP+"/rol/"+this.$route.params.id, {
auditoria: this.rol_auditoria,
activo: this.rol_state.activo,
_id: this.rol_id,
nombre: this.rol_name,
descripcion: this.rol_description,
modulos: this.rol_mod
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
this.$router.push({ name: 'showrol', params: { id: this.rol_id} });
}
}
}
</script>

Answer 1

如果没有来自控制台输出的信息以及从 GET 请求返回的实际信息或错误，这可能是一个很长的机会，但我注意到您的代码上有很多"this"用法。

1. 您是双嵌套公理调用，它们是异步的。"this"往往很难在JavaScript中调试，即使你使用的是应该相对安全的箭头函数。

请尝试添加：

let self = this;

在你开始你的GET请求之前，在你的承诺中使用"self"而不是"this"。

这可能
2. 很明显，但我没有看到你在代码中的任何位置调用this.submit((。在 GET 回调中的哪个位置调用 SUBMIT 来获取 PUT 请求？