Vue.js

Question

我想向我的后端应用程序发送 GET 请求并将 ID 作为查询参数传递。我要使用的路径是 - GET /api/v1/imports/products_batches/:id。这是我的代码：

imports.js

const fetchSyncedProductsResultRequest = (token, id) => {
  return axios
    .get(`/api/v1/imports/products_batches`, {
      params: { id: id },
      headers: {
        Authorization: `Bearer ${token}`,
      }
    })
    .then(response => {
      return response.data['result']
    })
};

sync_products.vue

<template>
  <div>
    <div class="col-12 col-md-3">
      <button
        type="button"
        class="btn btn-primary"
        @click="syncProducts"
      >
        Sync
      </button>
    </div>
  </div>
</template>

<script>

import {
  fetchSyncedProductsResultRequest,
} from '../../api/imports'

export default {
  name: 'BackboneSyncProducts',
  data() {
    return {
      fetchedProductSyncResult: [],
    }
  },
  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 fetchSyncedProductsResultRequest(this, '43').then(data => {
            console.log(data)
            this.fetchedProductSyncResult = data
          })
          // await createApparelMagicProductsRequest(this, this.styleCodes).then(data => {
            // this.loadId = data['id']
          // })
          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>

如您所见，我对 id=43 进行了硬编码并在此处添加了 console.log：

          await fetchSyncedProductsResultRequest(this, '43').then(data => {
            console.log(data)
            this.fetchedProductSyncResult = data
          })

它 returns 我 undefined.

我不知道，是我发送的查询参数不正确还是某处有错字？如何正确发送这个请求？

Answer 1

替换你的

axios
    .get(`/api/v1/imports/products_batches`, ...

和

axios
    .get(`/api/v1/imports/products_batches/${id}`, ...

Vue.js - 如何发送带有 id 作为路径参数的 GET 请求

Vue.js - how to send send GET request with id as path params

javascript

axios