axios.put 参数怎么传

Posted 2023-04-07

参考技术A el: '.box',
data: ,
methods:
get: function ()
axios(
method: 'post',
url: 'post.php',
data:
a:'1'

).then(function (response)
alert(response.data);
)
.catch(function (error)
alert(error);
);


);本回答被提问者采纳

Axios PUT 和 GET 请求有问题，有时运行良好，有时不行

【中文标题】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>&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>

【问题讨论】：

当您说 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 请求，如果这样做是正确的，我不会这样做，但这是唯一对我有用的方法，如果我不嵌套这两个请求，它就不会从服务器获取任何数据。