如何打印来自发布请求的响应

Posted 2023-02-23

【中文标题】如何打印来自发布请求的响应

【英文标题】：How to print the response from a post request

【发布时间】：2020-09-03 17:58:46

【问题描述】：

我正在尝试为与我输入的单词匹配的日托创建一个简单的搜索栏，我正在向 api 发送一个发布请求，然后我会返回与我输入的内容匹配的所有日托，这是我的代码：

<template>
  <div class="body">
    <div>
    <h1 class="mt-3">Busca una guarderia</h1>
    <div class=" mx-1 mb-5">
    <b-form @submit.prevent="buscarGuarderia">    
    <b-form-group id="input-group-1" label-for="input-1">
          <b-form-input
            id="input-1"  
            v-model="cadena"
            required          
          >          
          </b-form-input>
        </b-form-group>
    <div class="mt-2">
    </div>
    <b-button block pill type="submit" variant="success">
        Buscar
    </b-button>
    </b-form>
  </div>
  </div>
  </div>
</template>

<script>
import  mapState  from 'vuex';
export default 
  name: "SearchDaycare",
  data() 
    return 
    currentUser: ,
    cadena: ""
    
  ,
  computed: 
    ...mapState(["daycares"]),
  ,
  methods:  
      getDaycare()
      this.$store.dispatch("getDogDayCares", 
          user: this.currentUser.user
          );
    ,
      buscarGuarderia()       
      this.$store.dispatch("buscarGuarderia", [
        cadena: this.cadena,
      , "clients"])
      .then();
    
  ,
    created() 
        if (localStorage.getItem("user")) 
        try 
            this.currentUser = JSON.parse(localStorage.getItem("user"));
         catch (e) 
            localStorage.removeItem("user");
            
        
    

;
</script>
<style lang="scss" scoped>
h1 
  color: #40db9a;

.body 
  margin: 0;
  height: auto;
  display: grid;
  place-items: center;
  overflow: hidden;


.cards 
  display: flex;

.card 
  color: #063869;
  background-color: #eef6e1;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 3px 3px 12px 2px rgba(black, 0.6);
  transition: 0.2s;

.card:not(:first-child) 
  margin-left: -2rem;

.card:not(:last-child):hover,
.card:not(:last-child):focus-within 
  transform: translateY(-1rem);
  ~ .card 
    transform: translateX(2rem);
  

</style>

这是 buscarGuarderia 函数，它是将请求发送到 API 的函数

buscarGuarderia( commit , [credentials, userClass]) 
  return axios.post("/api/" + userClass + "/searchdaycarebyname", credentials).then();

它工作正常，我发送发布请求并从 API 获得响应，我想要做的是打印我得到的一个或多个响应，我在执行此操作时遇到问题，任何帮助将不胜感激 @987654321 @

【参考方案1】：

你可以在 vuex 中创建一个状态来存储响应，一个突变来更新状态。在buscarGuarderia 操作中，您可以调用该突变来更新存储状态。

最后，在要显示响应的 vue 组件中，只需从 store 中加载即可。

【参考方案2】：

在then里面可以填写成功响应：

buscarGuarderia( commit , [credentials, userClass]) 
  return axios.post("/api/" + userClass + "/searchdaycarebyname", credentials)
              .then(function(response)
                  console.log(response.data)
               );

【讨论】：

我措辞不正确，我不想在控制台中打印响应，我想在组件中显示响应，所以当我使用搜索栏时，它会向我显示数据，任何机会你可以帮我解决这个问题，我是 vue 新手，实现这一点非常困难，顺便感谢您的第一反应