Vue3, Fetch API, can't get the usable data

Question

I'm unable to print the actual data from this url, I only get a fulfilled promise. Any ideas?

const getAllPhotos = async () => {
  await fetch("https://jsonplaceholder.typicode.com/photos").then(function (
    response
  ) {
    return response.json();
  });
};

console.log(getAllPhotos());

Related https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Estus Flask, Feb 10 '23 at 08:58
@EstusFlask This isn't related to this question, but do you know anything about bundling a SPA for production using Vite/Rollup? — bassxzero, Feb 10 '23 at 09:08
@bassxzero I guess I know something. Vite+Vue setup is supposed to work for SPA out of the box. Consider asking a question if you have a specific problem with it — Estus Flask, Feb 10 '23 at 09:18
@EstusFlask I've been looking for an answer to this for a while now. Could you look at this and make sure I'm not just looking for the wrong thing before I ask a question? https://chat.stackoverflow.com/transcript/message/55960012#55960012 — bassxzero, Feb 10 '23 at 09:35
@bassxzero You're supposed to rebuild the app as soon as the code was updated. Usually built files (artifacts) are created remotely, not pushed to a repo from local machine. You may want to use CI/CD and trigger a build when a commit is pushed and deploy to the server through ssh, e.g. github actions if you use github — Estus Flask, Feb 10 '23 at 09:54
@EstusFlask That's what I thought, but If I build the bundles remotely using github actions, then I won't know the new file names of my bundle parts, because they will have a new chunk id in them (generated at build time). So how does my index.html get updated to point to the new bundle parts? — bassxzero, Feb 10 '23 at 10:03
@EstusFlask Ohhhh I figured it out. There is a Rollup core plugin that will generate the index.html file with the correct file names with chunk ids. https://github.com/rollup/plugins/tree/master/packages/html Thank you for the help — bassxzero, Feb 10 '23 at 10:09
@bassxzero Vite does this out of the box, it generates html that is supposed to be deployed together with assets — Estus Flask, Feb 10 '23 at 10:15
@EstusFlask Mine does not and I believe I'm using a standard vite.config. Do you have an example vite.cofig.js that I could look at? Like from your github or something? — bassxzero, Feb 10 '23 at 10:20
@bassxzero This recommended setup is supposed to do that https://vuejs.org/guide/quick-start.html#creating-a-vue-application . Not sure how it differs from yours, but notice that vite config is bare minimum, it handles only vue-specific things, the rest are default, and it generates dist/index.html with up-to-date hashed filenames — Estus Flask, Feb 10 '23 at 10:29

score 0 · Answer 1 · answered Feb 10 '23 at 08:48

0

this has nothing to do with vue. learn more about javascript specifically here Promise:

const getAllPhotos = async () => {
  await fetch("https://jsonplaceholder.typicode.com/photos").then(function (
    response
  ) {
    return response.json();
  });
};

getAllPhotos()
.then(data => console.log(data))

// or

console.log(await getAllPhotos()) // in async function or es 2022

answered Feb 10 '23 at 08:48

Tachibana Shin

2,605
1
5
9

`console.log(await getAllPhotos())` - this has something with Vue, as the code is likely in component scope. It requires the comp to use Suspense in order to use async/await in the body of setup function – Estus Flask Feb 10 '23 at 08:59
learn about javascript it's not related to vue. vue supports it with [Suspense](https://vuejs.org/guide/built-ins/suspense.html) – Tachibana Shin Feb 10 '23 at 09:06
But the answer doesn't address Suspense, which is relevant – Estus Flask Feb 10 '23 at 09:17
why do you think he needs vue to do that? about the nature of `Promise`? we don't even know where he's using it or if he's using ` – Tachibana Shin Feb 10 '23 at 09:32
@EstusFlask if he needs `Suspense` i will fix the answer but not now – Tachibana Shin Feb 10 '23 at 09:34
The code that was posted looks like a snippet from comp setup, so it depends on Vue suspense instead of es2022 top-level await. Since the question is incomplete, a clarification from the OP is still needed – Estus Flask Feb 10 '23 at 09:46

Vue3, Fetch API, can't get the usable data

1 Answers1