Vue 如何显示来自后端的响应 API

Question

很抱歉提出这样的菜鸟问题，但我已经放弃了。我在下面的代码中创建了一个 POST 请求到应用程序的 BE 部分 - 用户提供输入 (productCodes) 并按下提交按钮。该部分运行良好，Vue 向 BE 发送请求，但在响应中 FE 应该收到 JSON 结果：{ id: 1234 }

如何获得此响应并将其显示在应用程序中？我有以下内容：

imports.js

    const createProductsRequest = (self, products) => {
      const jwtToken = self.$store.state.idToken;
      const payload = JSON.stringify({ product_codes: products['product_codes'].split(',') })
    
      return axios
        .post(`/api/v1/imports/products/`, payload,{
          headers: {
            Authorization: `Bearer ${jwtToken}`,
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          }
        })
        .then(response => response.data)
    };

export {
  createProductsRequest
};

sync_product.vue

<script>

import {
  createProductsRequest
} from '../../api/imports'

import ModalController from '../general/modal_controller'

export default {
  name: 'BackboneSyncProducts',
  data() {
    return {
      styleCodes: [],
    }
  },
  computed: {
    productsToSyncAmount () {
      return this.styleCodes.length
    },
  },
  methods: {
    async syncProducts() {
      let confirmationText = `Do you want to ${this.productsToSyncAmount} sync products?`

      if (this.productsToSyncAmount === 0) {
        ModalController.showToast('', 'Type product codes for sync first, please!', 'warning')
      }
      else if (await ModalController.showConfirmation('Confirmation', confirmationText)) {
        try {
          ModalController.showLoader()
          await createProductsRequest(this, this.styleCodes)
          const successMessage = `${this.productsToSyncAmount} products have been queued for sync`
          await ModalController.showToast('', successMessage)
        } catch (data) {
          const errorMessage = `Error occurred during queueing products to sync - `
          ModalController.showToast('', errorMessage + data?.message, 'error')
        } finally {
          this.styleCodes = []
          ModalController.hideLoader()
        }
      }
    },
  }
}
</script>

我只有这些。

Answer 1

而不是在未获得 return 值的情况下调用您的请求：

await createProductsRequest(this, this.styleCodes)

您可以获得 return 值，这是请求的结果：

const data = await createProductsRequest(this, this.styleCodes)

通过这样做，数据必须包含请求的结果，正如您提到的 { id: 1234 }。

--

如果你想在你的组件中使用这个结果，你可以在 data()

中创建一个反应值

data() {
  return {
    styleCodes: [],
    data: null
  }
},

并像这样存储结果：

this.data = await createProductsRequest(this, this.styleCodes)

这样您就可以在您的模板中显示它，例如：

<template>
  <!-- There is a v-if because before doing the request, data is null -->
  <div v-if="data">{{ data.id }}</div>
</template>

Vue 如何显示来自后端的响应 API

Vue how to display response from backend API

javascript

vue.js

axios