5 Ways to Fetch Data from an API in Vue 3 Composition API

Поділитися
Вставка
  • Опубліковано 26 жов 2024

КОМЕНТАРІ • 46

  • @Ma1ne2
    @Ma1ne2 3 роки тому +7

    Great explanation with great visuals, a calming voice to listen to and exciting but understating music, I loved it! Got a new sub m8 ☺️

  • @_the_one_1
    @_the_one_1 3 роки тому +11

    Great video as always Justin. Please create a Vue 3 course and take my money!

  • @parogparog6774
    @parogparog6774 3 роки тому +4

    Very concise and to the point. I don't subscribe to channels very often, but the format and depth for the different possibilities you bring up are exactly the type of content an experience dev is looking for. :) Thanks!

  • @ferhatsunaycansev106
    @ferhatsunaycansev106 2 роки тому +1

    useFetch example is very very very great thanks alot man! love from Turkey!

  • @RianY2K
    @RianY2K 3 роки тому +5

    thanks for tutorial. Vue JS 3 looks good in Syntax and API

  • @sivasankarant9195
    @sivasankarant9195 3 роки тому +5

    Justin thanks man

  • @paws7983
    @paws7983 2 роки тому

    Many thanks to Justin!

  • @Mahmudulhasan-ts5hm
    @Mahmudulhasan-ts5hm 3 місяці тому

    nice, love vue.js

  • @RSurya99
    @RSurya99 2 роки тому +1

    can you explain how to use the method created in last section? because when I call it on component it will return Computedrefimpl

  • @fifty6737
    @fifty6737 2 роки тому +1

    the composition api is miles ahead of react hooks, they really nailed it with this types and functions

    • @Nexus9997
      @Nexus9997 2 роки тому

      I honestly prefer Vue but i've never really used the composition api, so what makes you think that ?

  • @AnisD756
    @AnisD756 2 роки тому

    It's probably overkill for just a basic fetch but that last function is really cool. I had to pause screen to copy it :p

  • @navidkhm7885
    @navidkhm7885 Місяць тому

    At first I thought it's a scam by talking about vue and rolling world wide web but at the end I was surprised :)

  • @ColinRichardson
    @ColinRichardson 2 роки тому

    I didn't think you could use 'reactive' outside of the 'use' function because it had the potential to be initialised before the Vue instance had been configured?

  • @darkmift
    @darkmift 3 роки тому +4

    Its always good practice to add a repo or gist link to the code used in the presentation.
    Great demo,first time I see use of cache logic and the map use is very cool.

  • @2603bex
    @2603bex 3 роки тому

    Brilliant! Thank you

  • @zlatkoiliev8927
    @zlatkoiliev8927 8 місяців тому

    Shouldn’t we invalidate the cache after some time?!? The approach from the example absolutely prevent fetching new data if we already have cached key. Maybe it will be a good idea to only keep the cache for some time like 15 min or something…

  • @LukeryaPereprygova
    @LukeryaPereprygova 3 роки тому +1

    Very fireship-y))

  • @emonymph6911
    @emonymph6911 2 роки тому +2

    Should have made video longer and shown examples of how it works by grabbing X from front end and storing it in DB at backend so we can visualize each method and select what we prefer syntaxically. You should also mention which fetching methods are compatible with web components and which are not, make a table (consider it as feedback)

    • @lilmila4533
      @lilmila4533 2 роки тому

      YES! Is there a tutorial like this you know? I could not find it :(

  • @jntaca
    @jntaca 3 роки тому

    Thanks !
    Very useful .

  • @AhSoh7091
    @AhSoh7091 3 роки тому

    Thanks for sharing, do you have real example to use the useFetchCache hook? i tried it doesn't really work correctly. Hope you can share more about it.

    • @CodingWithJustin
      @CodingWithJustin  3 роки тому +1

      It depends on you are using the hook. If you call the two hook immediate after each with the same key, both fetches will be called, since there is nothing in cache until a fetch has finished. This makes it useful for grabing information in lower components that are only dispalyed if a apprent component fetch has successed, or when coming back to the same page as mentioned in the video. Of course you can expand on the hook to make it better.

    • @AhSoh7091
      @AhSoh7091 3 роки тому

      @@CodingWithJustin​Thanks for your explanation. Anyway, you made a ton of great video. i love to watch your video.

  • @gagiknavasatariyan7316
    @gagiknavasatariyan7316 3 роки тому

    Hi, Great content Thanks!

  • @carlosalvarado5331
    @carlosalvarado5331 3 роки тому

    I was trying the sample code that you provide the get method is OK but how can I create a post request :v

  • @epiiiiiii
    @epiiiiiii 3 роки тому

    Good stuff. I just wish you were using the Options API until I catch up. 😜

  • @Endersontutoriales
    @Endersontutoriales 3 роки тому

    Nice!!

  • @kinax2
    @kinax2 3 роки тому

    Can you make a vue-i18n@next with routing video ?

  • @junaidjahan6864
    @junaidjahan6864 Рік тому

    Awesome

  • @Orphy7
    @Orphy7 2 роки тому

    I m watching a lot of these video but I still can’t understand how should I do to connect vue and axios with my msql database :(

    • @AnisD756
      @AnisD756 2 роки тому

      You can use something like Api-platform

  • @marvin_e
    @marvin_e 3 роки тому

    damn.. this is so awesome

  • @pierre1360
    @pierre1360 2 роки тому

    what is that ref() stuff?

  • @zekariyasmulugetaaltaye1065
    @zekariyasmulugetaaltaye1065 2 роки тому

    this video just saved my ass from a lot of trouble, Literally. Thank you

  • @DK-pf2dg
    @DK-pf2dg 3 роки тому

    Please make guide how to create a pagination.

  • @rafaelgramoschi957
    @rafaelgramoschi957 Рік тому

    when you check "!config.skip && fetch()" you must "!config.skip && AWAIT fetch()"

  • @ricko13
    @ricko13 3 роки тому

    gold

  • @Markus-iq4sm
    @Markus-iq4sm Рік тому +1

    Awful explanation, for useFetch you just copy-pace useAsyncState source code function from VueUse. What did you explaine? The case when author does not understand what he actually says

  • @ranavitaln
    @ranavitaln Рік тому

    Please show examples 🙏

  • @LeLeTesoro
    @LeLeTesoro 2 роки тому +1

    This video is like, "Info for beginners, beginners, beginners, dissertation for 2nd PhD in computer science, The End"

  • @MarcdeRuyter
    @MarcdeRuyter 2 роки тому

    This only confuses matters

  • @MrNihilius
    @MrNihilius 2 роки тому

    please without music

  • @jaromanda
    @jaromanda 2 роки тому

    you lost me at axios - it has "a much shorter syntax" ... sure, it does, it's a JS library written using the old XMLHttpRequest methods
    It's SO easy to write a very small library, using fetch, that exposes a similar, short, syntax
    Seriously, you create a function called `useFetch` ... which uses axios (which uses native XMLHttpRequest, not native Fetch) --- sacrilege!!! You probably use internet explorer 7 as your daily web browser!!!