How to use Axios with React

Поделиться
HTML-код
  • Опубликовано: 13 сен 2024

Комментарии • 188

  • @paulhalliday
    @paulhalliday  2 года назад

    Updated video coming soon. Here's a tutorial which shows how to use this with Next.js 12, Tailwind and JSON server: developer.school/tutorials/how-to-use-axios-in-a-nextjs-react-app

    • @cond6920
      @cond6920 2 года назад

      how can I take the response data from the then in axios post, and show it on the page? Like, I send an integer with axios on frontend to my backand api, and the callback promise, returns an json to the .then(res => console.log(res.data)) on frontend, and I want to display this res.data on the page

  • @night_city_nights
    @night_city_nights 2 года назад +2

    Super clear and effective. Thanks for not complicating unnecessarily for us beginners!

  • @gourangabhattacherjee6648
    @gourangabhattacherjee6648 3 года назад +2

    For the first-timers, this tutorial is a little fast to follow!

  • @marcomarkproductions
    @marcomarkproductions 5 лет назад +2

    Thanks to this video, I am no longer stressed out with the problem I was having

  • @kirstym6969
    @kirstym6969 4 года назад +12

    Perfectly explained, exactly what I was looking for. Thank you. :)

  • @akashandroiddeveloper6693
    @akashandroiddeveloper6693 2 года назад +1

    Tq sir most valuable Tutorial

  • @wolfmuldoon2333
    @wolfmuldoon2333 6 лет назад

    Finally someone not using an onClick demonstration. Thank you for your video, you allowed me to break my wall.

    • @paulhalliday
      @paulhalliday  6 лет назад +1

      That’s what I like to hear! 🙌🙌

  • @kennan10101
    @kennan10101 5 лет назад +4

    What a great, clear video summary. Thank you for this!

  • @ahmedpatel408
    @ahmedpatel408 3 года назад

    Very good explanation, this channel is my new source for learning, TY

  • @WaheedRafiq
    @WaheedRafiq 3 года назад

    Well, explain simply to follow and understand dyslexic friendly tutorial keep up the hard work.

  • @deru_donTech
    @deru_donTech 5 лет назад +3

    Awesome, clear and magnificent tutorial !!! Thank You so much !!!!!!!!!!

  • @ruslanogarkov808
    @ruslanogarkov808 4 года назад +2

    Man you rock!!! You explain so good and so simply 🤩🚀🚀🚀

  • @deshengli
    @deshengli 5 лет назад +4

    Your font looks cool

  • @vanithan3691
    @vanithan3691 4 года назад

    Your explanation was very clear.
    Thank u..!

  • @user-mn2po8ns2z
    @user-mn2po8ns2z 3 года назад

    what a wonderful font!

  • @misteronsepatro7018
    @misteronsepatro7018 5 лет назад +8

    Thanks for the tutorial you saved me and my keyboard xD

  • @Captain-os9dc
    @Captain-os9dc 4 года назад +1

    Hey your vscode font style is awesome what is that font style name ?? Can you tell me

  • @sethurk
    @sethurk 3 года назад

    I think the theme used is "Tomorrow and Tomorrow Night Operator Mono Theme" with "editor.fontFamily": "Operator Mono, Consolas, 'Courier New', monospace"

    • @sethurk
      @sethurk 3 года назад

      Font is expensive like $200+. There are free alternative or Night Owl which might match a bit

  • @jasper5016
    @jasper5016 2 года назад

    Thanks for the video. Wish u had used hooks.

  • @maximbazadji4895
    @maximbazadji4895 4 года назад +6

    thank you, good man! Can I use Axios in async/await way?

    • @mynameis6575
      @mynameis6575 4 года назад +3

      You can,for example:
      async function posting{
      try {
      const response = await axios.post('path', obj);
      return response;
      }
      catch(err) {
      throw err;
      }
      }
      this is being called by another function, so dont worry about the strange try/catch XD

    • @mattmarkus4868
      @mattmarkus4868 4 года назад +1

      Yep.
      try
      {
      const data = await ax.get()
      c.log (data)
      }
      catch(error)
      {
      //log error
      }

  • @oswaldkit
    @oswaldkit 4 года назад

    font-style looks nice

  • @safalpatel2839
    @safalpatel2839 3 года назад

    Thank you brother

  • @bradleyhamilton5969
    @bradleyhamilton5969 4 года назад

    This is well done sir! Thanks very much for posting this...

  • @maxparker6745
    @maxparker6745 3 года назад

    thank you so much i cant do work without some of these videos but will you do some cauculos or more of it if you have any

  • @dmytropodhora
    @dmytropodhora 3 года назад

    Thanks a lot for this video. It helped me a lot.

  • @hasanrothi5860
    @hasanrothi5860 4 года назад

    I get great help from this video.
    Thank you.

  • @SiyaaTalks
    @SiyaaTalks 6 лет назад

    Thank You so much Mr Paul ! Nice and knowledgeable video.

  • @mirandamanriquez1947
    @mirandamanriquez1947 6 лет назад

    A bit fast, but filled with lots of great information.

  • @sharonalexander7254
    @sharonalexander7254 4 года назад +2

    Arigatou sensei!

  • @Herclia
    @Herclia 6 лет назад +7

    Hello Paul, what is font-family ( name of font ) do you use in IDE ? Thanks.

  • @SalmanAhmad0122
    @SalmanAhmad0122 4 года назад

    This video is amazing!

  • @suryapratapsingh5043
    @suryapratapsingh5043 3 года назад

    can you please tell the name of theme which you are using? This is very cool :)

  • @lucianobraga250
    @lucianobraga250 6 лет назад +1

    Nice Video!!
    Thank you for share your knowledge.

  • @paramgandhi5768
    @paramgandhi5768 2 года назад

    can you make the same with functional components?

  • @VillageJoker
    @VillageJoker 6 лет назад

    thank you very much paul

  • @kran399
    @kran399 5 лет назад +1

    Bro, send the code. Excellent work in simple and smart way

  • @erickurbanolino2083
    @erickurbanolino2083 4 года назад +1

    If I have mutliples inputs i need create one event for each input value????

  • @amnesia3490
    @amnesia3490 4 года назад +1

    Thanks for the video, realy helpful :)

  • @durgaprasaddas6494
    @durgaprasaddas6494 3 года назад

    which font style you're using in vscode? it's smooth

  • @MusicandGame23
    @MusicandGame23 4 года назад

    Thanks for that, but one problem is how I can get data , I try it but it's not showing

  • @veerendrasdevaraddi4625
    @veerendrasdevaraddi4625 4 года назад

    Thanks Paul 🖤👍

  • @TheFallinforyou
    @TheFallinforyou 6 лет назад +2

    Great video! What theme are you using?

    • @extremus7673
      @extremus7673 6 лет назад

      You have probably found it by now, but the theme is called Dracula.

  • @tjleis6847
    @tjleis6847 5 лет назад +1

    how would i go about posting scores from a game app into my database?
    i'm using the MERN stack

  • @kassi7348
    @kassi7348 4 года назад +1

    thanks alot

  • @adnanullah1160
    @adnanullah1160 2 года назад

    This one is so cool.
    But I wanna know one more things, can you help me?
    After posting axios method how can i update or post also django databse ? It put to api but not in django db..please help!

  • @RaghuprasaadIyer
    @RaghuprasaadIyer 4 года назад

    can you tell us your vs code customization

  • @shavkatxoldorov3863
    @shavkatxoldorov3863 3 года назад

    this video very interesting but very few

  • @kirill_nezhnyy
    @kirill_nezhnyy 4 года назад

    Понял, принял, обработал... Лайк!

  • @iurii7752
    @iurii7752 6 лет назад

    Great job, Thank you

  • @himthakur619
    @himthakur619 4 года назад

    Ajax vs xhr vs fetch api vs axios
    Which one should we use?

  • @mecode7850
    @mecode7850 2 года назад

    why didnt you use function based components

  • @AlexNguyen
    @AlexNguyen 6 лет назад

    Awesome, thanks for this!

  • @techavy5537
    @techavy5537 4 года назад +1

    Perfect thanks

  • @carolineho603
    @carolineho603 5 лет назад +2

    Hello, what is your text editor? how did you customize it? It looks very convenient! thank You

    • @lestercute892
      @lestercute892 5 лет назад

      following.

    • @Nikrocks008
      @Nikrocks008 5 лет назад +2

      Its called Visual studio code and its awesome. The best part is that it is all free and so much customization option. You should get it :)

    • @carolineho603
      @carolineho603 5 лет назад

      @@Nikrocks008 thanks.I use atom, does visual studio has as much options as in atom (like ESLinter for ex.)? thank you

    • @arhabersham
      @arhabersham 5 лет назад +1

      Yes, it does :)

    • @Nikrocks008
      @Nikrocks008 5 лет назад +1

      yes it does. you should give it a try.

  • @MrOnizukakira
    @MrOnizukakira 6 лет назад

    thank's for tutorial ! what about adding authentication header ?

    • @paulhalliday
      @paulhalliday  6 лет назад

      I’ll add a video on this in the future. 👍

  • @harshadsahu7912
    @harshadsahu7912 3 года назад

    Hey what font style do you use in VS code, it's look good. Although nice video man, really appreciate your efforts.

    • @aryan7069_
      @aryan7069_ 3 года назад

      what is font style he is using

  • @FinkPatricio
    @FinkPatricio 4 года назад

    By using Axios and Async methods, we eliminate the need of javascript promises API calls, right?

  • @AGOF_Vlogs
    @AGOF_Vlogs 5 лет назад

    How to get access token using axios, with client I'd, secret id, url, base url..... Plz u answer it's very important for me. I m using JavaScript. The same is working in postman

  • @aryan7069_
    @aryan7069_ 3 года назад

    which font you using ? in VS CODE please reply

  • @deepikalnaik8102
    @deepikalnaik8102 3 года назад

    in the place of showing list of names in the browser iam only getting it hasperson name.so can you tell me why isnt the http API being called

  • @ridwanulhasantanvir6456
    @ridwanulhasantanvir6456 3 года назад

    0:17 what is axios

  • @badrinathans5695
    @badrinathans5695 4 года назад

    Arry bhai kithana speed hey

  • @SWA201
    @SWA201 4 года назад

    Perfect. 10/10
    Link to code?

  • @Harry-dc4dg
    @Harry-dc4dg 4 года назад

    thank you

  • @laponiec
    @laponiec 3 года назад

    This font might look good, but sometimes it is gard to see at first glance whther a given letter is in capitals or not.

  • @SzTz100
    @SzTz100 5 лет назад

    Excellent

  • @alexandracarolinaaguilarag8685
    @alexandracarolinaaguilarag8685 5 лет назад

    Una consulta como agrego el header en la configuración de axios??

  • @edd338
    @edd338 5 лет назад +2

    How to re-render the list of users when onSubmit? At 7:22

  • @atmospheric_b
    @atmospheric_b 6 лет назад

    Thanks a lot!

  • @carlellis9647
    @carlellis9647 5 лет назад

    The good part. You teach users how to use Axios. The bad part, it's bad application design. What you should be doing is creating a service class for making request to any web service. Then provide the functionality with Axios within that service class with methods that return data. Then import the service class into any React component class that needs it and call its methods to return the data to the React component.

  • @axeDev
    @axeDev 4 года назад

    What is the name of that font extension?

  • @amarnarayanpasuperti9360
    @amarnarayanpasuperti9360 4 года назад

    post throws cors error though i am passing required headers from sever. Post works fine in postman

    • @stephanellenberger4987
      @stephanellenberger4987 4 года назад

      What API are you using? You may need to configure your API to take HTTP verbs besides get.

  • @ashuvssut
    @ashuvssut 3 года назад

    what is the name of the font you use...? its somewhat looking like Dank Mono.

  • @subhrajyotichakraborty5861
    @subhrajyotichakraborty5861 6 лет назад +2

    Hi Paul, nice video.
    Could you make a video on facebook and google login integration in react native?

  • @oluwalonirichardsodeinde1842
    @oluwalonirichardsodeinde1842 4 года назад

    Hi paul the slack link is no longer available!

  • @oswaldkit
    @oswaldkit 4 года назад

    which IDE is this? it looks cool!

  • @petiaduskin891
    @petiaduskin891 4 года назад

    wthat is the name of this font you are using in?

  • @JGA47
    @JGA47 3 года назад

    this is a font, vscode?

  • @jumbo999614
    @jumbo999614 3 года назад

    I got post bad request 400. how to fix it?

  • @amirsohel9260
    @amirsohel9260 4 года назад

    how can i get this font family for code editor ?

  • @rahulsinghmawari0536
    @rahulsinghmawari0536 6 лет назад

    Thanks bro💓

  • @openmindjustdoit1306
    @openmindjustdoit1306 2 года назад

    Good jop
    How add bootstrap to REACT project then it cover all project
    Where the best place put it
    How access to function add for only user login

  • @MS-nh7zj
    @MS-nh7zj 4 года назад

    how to rerender after submitting without refreshing at 9:00 ?

  • @SweetestTrade
    @SweetestTrade 4 года назад

    What do you do when you have to change/update Name, age, and title? Do I use this.setState for all three? Thanks

  • @heyyana9549
    @heyyana9549 5 лет назад

    how do you render the user submitted on users list?

  • @FitraFadilana
    @FitraFadilana 4 года назад

    how to handle ssl handshake with axios?

  • @ameerattaa2250
    @ameerattaa2250 6 лет назад

    the ionic tutorial is finished ?

  • @sathishramyen4235
    @sathishramyen4235 6 лет назад

    u r amazing !!!

  • @omergutman3264
    @omergutman3264 2 года назад

    I am getting 'this.state.person.map is not a function' error has anyone else received it ?

  • @vishhvaksrinivasan1618
    @vishhvaksrinivasan1618 4 года назад +2

    Hey Paul, I got Operator Mono, yet I'm not able to understand how select statements such as import are italic for you, excluding other code. I'm either able to set all italic or none at all. How do I achieve that? Please help its driving me crazy.

    • @paulhalliday
      @paulhalliday  4 года назад

      This will depend on the VS Code theme used. I’d recommend finding one with italics enabled (I.e. do a search for “italics”) or customising your own. :)

    • @jerrylove1759
      @jerrylove1759 4 года назад

      What theme do you use?

  • @RANDYORTONbest1
    @RANDYORTONbest1 6 лет назад +3

    I am using React with Axios to make a request (get, in my example) to a local api endpoint, and I get Cross origin requests error. Anybody has any idea how to fix this CORS issue?

    • @khurram650
      @khurram650 4 года назад +1

      how did you solve it?

    • @stef9019
      @stef9019 4 года назад

      @@khurram650 It's an issue with Chrome, try running the following command in your CMD and using that window instead:
      "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp

    • @SalmanAhmad0122
      @SalmanAhmad0122 4 года назад

      you can fix it by changing the local endpoint to localhost:3000 instead of just localhost:3000 or wherever you end up hosting it.

  • @sadafsadiq7898
    @sadafsadiq7898 5 лет назад

    How would you send a post request from React app with json object to a Web Api on IIS with Windows auth enabled.

  • @rhamiel1040
    @rhamiel1040 2 года назад

    Yo, which font?? which theme??

  • @sigmawolf228
    @sigmawolf228 3 года назад

    what's the font you use?:)

  • @freetorials2990
    @freetorials2990 6 лет назад +1

    how about retrieving data from php json_encode ?

  • @LindelaniKgothatsoSodi
    @LindelaniKgothatsoSodi 6 лет назад

    Great Stuff :)

  • @Faz13able
    @Faz13able 4 года назад

    What is that font man?

  • @juhandvan
    @juhandvan 5 лет назад

    At the [5:00], when you use axios.post (`url`, {user}), I wonder why above that you declared the user to be an object:
    const = {user
    Name: this.state.name
    }
    So why do we call it in axios.post (`url`, {user}) we have to put the "user" in a pair of curly braces {} ?

    • @DerJP
      @DerJP 5 лет назад

      Because he wants to post the user as a property of an object instead of the user object. Maybe the API requires the data in that format.
      But you probably figured that out by now. ^^

  • @Porkupine69
    @Porkupine69 2 года назад

    What is that font?

  • @charles_hacks
    @charles_hacks 4 года назад

    How do you set up your vscode font like that?