Axios PUT 和 GET 请求有问题，有时运行良好，有时不行
Posted
技术标签:
【中文标题】Axios PUT 和 GET 请求有问题，有时运行良好，有时不行【英文标题】：Problem with Axios PUT and GET request, sometimes work well, sometimes doesn't 【发布时间】：2019-03-10 07:50:09 【问题描述】：我正在使用 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> </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> </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> </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>
【问题讨论】：
当您说 PUT 请求并不总是有效时。它以什么方式失败？请求返回时是否从服务器返回错误，或者请求返回成功？ 请将 catch (es) 添加到您的所有 axios 调用中，可能是从 GET 返回的错误请求。代码本身看起来不错 当某些东西不起作用时，您应该始终解释它的含义。简单的“不工作”不能帮助任何人帮助你。请求要么失败，这意味着您可以将错误发送给我们，要么没有，这意味着您的前端逻辑存在问题。请提供更多信息，以便人们可以帮助您:) 您好，感谢您回复本帖。当我说它不起作用时，是因为当我提出请求时，它不会更改数据库中该寄存器中的任何内容，它有时有效，有时无效，我无法尝试调试，因为我正在没有从服务器得到任何错误的响应（即使我在视图中打印响应我得到 200），并且当我打开控制台时它总是正确地进行更新。 【参考方案1】：如果没有来自控制台输出的信息以及从 GET 请求返回的实际信息或错误，这可能是一个长镜头，但我注意到您的代码中有很多“this”使用。
-
您正在双重嵌套 axios 调用，它们是异步的。 “this”往往很难在 javascript 中调试，即使您使用的是相对安全的箭头函数。
请尝试添加：
let self = this;
在你开始你的 GET 请求之前，在你的 Promise 中使用“self”而不是“this”。
-
这可能很明显，但我没有看到您在代码中的任何地方调用 this.submit()。您在 GET 回调中的哪个位置为 PUT 请求调用 SUBMIT？
【讨论】：
即使 axio 改变了作用域（它没有），史蒂文一直在使用箭头函数，所以作用域（this）永远不会改变。不过好想！ :) 我建议您在 cmets 中提出问题/提供建议，并且仅在您真正知道什么不起作用时才回答。否则人们可能会否决您的答案，因此只会使整个平台混乱。祝你好运！ 您好，我在组件的 html 部分中调用了 submit()，特别是在按钮中。关于嵌套的 GET 请求，如果这样做是正确的，我不会这样做，但这是唯一对我有用的方法，如果我不嵌套这两个请求，它就不会从服务器获取任何数据。以上是关于Axios PUT 和 GET 请求有问题，有时运行良好，有时不行的主要内容，如果未能解决你的问题，请参考以下文章
vue 对axios get pust put delete 封装
Vue-cli webpack 设置Axios发起请求统一前缀的路径（设置统一请求地址）（发起GET请求，发起POST请求，发起PUT请求，发起DELETE请求）
ASP.NET 网站不允许 Axios PUT 访问（不允许 405 方法）