Why does this API call return [object Promise]?

Question

I've created an API with FastApi and this is the only thing it has stored in it: {"data":[-17,23,-11,-10,-7]}. And I've tested it and it returns the correct thing when I run it with Python. But why in this Vue.js website I'm creating it only returns [object Promise] when I'm using Axios to call it?

<script>
import ProductService from '../service/ProductService';
import axios from 'axios';

export default {
    data() {
        return {
            products: null,
            lineData: {
                labels: ['january', 'second', 'third', 'fourth', 'fifth'],
                datasets: [
                    {
                        label: 'Revenue',
                        data: [-0, 23, -11, -10, -7],
                        fill: false,
                        backgroundColor: '#2f4860',
                        borderColor: '#2f4860',
                        tension: 0.4
                    },
                    {
                        label: 'Profits',
                        data: [], # I want my API to put the list of datapoints here
                        fill: false,
                        backgroundColor: '#00bb7e',
                        borderColor: '#00bb7e',
                        tension: 0.4
                    }
                ]
            },
            items: [
                {label: 'Add New', icon: 'pi pi-fw pi-plus'},
                {label: 'Remove', icon: 'pi pi-fw pi-minus'}
            ]
        }
    },
    productService: null,
    created() {
        this.productService = new ProductService();
    },
    mounted() {
        this.productService.getProductsSmall().then(data => this.products = data);
        axios #Here I am calling the API
            .get('http://localhost:8000/')
            .then(response => {(this.lineData.datasets[1].data = response.data)})
    },
    methods: {
        formatCurrency(value) {
            return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
        }
    }
}
</script>

Edit: Okay now I logged it. This is what I got: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

and

createError createError.js:16
handleError xhr.js:117
dispatchXhrRequest xhr.js:114
xhrAdapter xhr.js:15
dispatchRequest dispatchRequest.js:58
request Axios.js:108
method Axios.js:129
wrap bind.js:9
mounted Dashboard.vue:285
callWithErrorHandling runtime-core.esm-bundler.js:6992
callWithAsyncErrorHandling runtime-core.esm-bundler.js:7001
__weh runtime-core.esm-bundler.js:2270
flushPostFlushCbs runtime-core.esm-bundler.js:7193
flushJobs runtime-core.esm-bundler.js:7230```

Where are you seeing the response being `[object] Promise`? Are you logging the output of the output of axios.get anywhere? — Sanil Khurana, Jan 04 '22 at 06:59
Ah yes, I know it because I logged it in the 'label' to test what it returns. On the website I can see it then. — Olwar, Jan 04 '22 at 07:02
`axios.get` is just returning a Promise. Promises are a way to run code asynchronously. Looking at your code, it should be working fine. Can you log the output of the `response` variable? — Sanil Khurana, Jan 04 '22 at 07:04
so if I do like this: ```labels: [axios.get('http://localhost:8000/').then(response => response), 'second', 'third', 'fourth', 'fifth']``` I can see that now 'first' is replaced with [object Promise] on the website. Is that what you meant? Sorry If I'm not understanding correctly, new to vuejs. — Olwar, Jan 04 '22 at 07:14
Can you log the value of `this.lineData.datasets[1].data` after the API call? Replacing - `.then(response => {(this.lineData.datasets[1].data = response.data)})` with `.then(response => {this.lineData.datasets[1].data = response.data; console.log(this.lineData.datasets[1].data)})` — Sanil Khurana, Jan 04 '22 at 07:23
This isn't specific to Vue, these are the basics of JS, consider checking them first. The question doesn't contain the code that outputs [object Promise]. If this happens to you, this means that you mistakenly used a promise where it shouldn't. axios.get returns a promise of a result, not a result itself. It cannot be returned as is and always needs to be unwrapped inside then function. Also check https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call — Estus Flask, Jan 04 '22 at 07:27
Now I logged it, it's below. Couldn't edit my original post for some reason. — Olwar, Jan 05 '22 at 06:23
I really don't know what this question is asking. Is it about the promise? Is it about CORS? Those are pretty fundamental and easily googleable concepts. I'm not even sure which bit of the code is doing the logging (I don't see anything that would generate output). — Quentin, Jan 06 '22 at 07:52

score 0 · Answer 1 · answered Jan 07 '22 at 14:33

Okay got it fixed now.

I had too add to the fastapi python-file:

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

And yes, I know that using a wildcard is not good practice.

Why does this API call return [object Promise]?

1 Answers1