My goal is to make a GET request to my backend application and pass an ID as a query parameter. The endpoint I want to use is -
GET /api/v1/imports/products_batches/:idimports.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>
In the code, I have hardcoded id=43 and added a console.log statement here:
await fetchSyncedProductsResultRequest(this, '43').then(data => {
console.log(data)
this.fetchedProductSyncResult = data
})
However, it is returning undefined.
I am unsure if I am passing the query parameters incorrectly or if there is a typo in my code. How can I correct this and send the request successfully?