{"id":55923,"date":"2022-11-29T09:48:40","date_gmt":"2022-11-29T04:18:40","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=55923"},"modified":"2022-12-06T09:57:09","modified_gmt":"2022-12-06T04:27:09","slug":"fetch-vs-axios-for-making-http-requests","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/fetch-vs-axios-for-making-http-requests\/","title":{"rendered":"Fetch vs. Axios for making HTTP requests"},"content":{"rendered":"

What is API? Why do we need them?<\/b><\/h3>\n

API stands for \u201c<\/span>Application Programming Interface<\/b>,\u201d which is a software intermediary that allows two applications to talk to each other.\u00a0<\/span>APIs simplify how developers integrate new application components into existing architecture, they help business and IT teams collaborate. Business needs often change quickly in response to ever-shifting digital markets, where new competitors can change a whole industry with a new app.<\/span><\/p>\n

CRUD Operations in API-<\/b><\/h3>\n
    \n
  • Create<\/i><\/b>: <\/b>Inserts a new data<\/span><\/li>\n
  • Read<\/i><\/b>: <\/b>Read the data<\/span><\/li>\n
  • Update<\/i><\/b>: <\/b>Update the existing data<\/span><\/li>\n
  • Delete<\/i><\/b>: <\/b>Delete the existing data<\/span><\/li>\n<\/ul>\n

    List of HTTP Request methods<\/b><\/h3>\n
      \n
    • POST<\/span><\/i> – is used to send data to a server to create a resource.<\/span><\/li>\n
    • GET<\/span><\/i> – is used to request data from a specified resource.<\/span><\/li>\n
    • PUT<\/span><\/i> – is used to send data to a server to update a resource.<\/span><\/li>\n
    • DELETE<\/span><\/i> – is used to delete the specified resource.<\/span><\/li>\n<\/ul>\n

      Let’s take an example of how we can use APIs.<\/span><\/p>\n

      Using Fetch –\u00a0<\/b><\/h3>\n

      Fetch API provides a fetch() method defined on the window object. It uses body property.\u00a0<\/span><\/p>\n

      It means that you don’t need to install fetch; it comes with ES6 as a built-in functionality.<\/span><\/p>\n

      Fetch Code Example –<\/b><\/h4>\n
      fetch(\"URL\")\r\n\/\/ The fetch() method returns a Promise. After the fetch() method, include the Promise method then()<\/strong>\r\n\/\/ A Promise is an object representing the eventual completion or failure of an asynchronous operation<\/strong>\r\n\/\/ Call the fetch function passing the url of the API as a parameter\r\n<\/strong>\r\n  \u00a0.then(() => {\r\n  \u00a0 \u00a0 \u00a0\/\/ Your code for handling the data you get from the API<\/strong>\r\n  \u00a0})\r\n  \u00a0.catch(()=> {\r\n  \u00a0 \u00a0 \u00a0\/\/ This is where you run code if the server returns any errors<\/strong>\r\n  \u00a0});\r\n\r\n\r\n<\/pre>\n
      .then –<\/b> If the Promise returned is resolved<\/span>, the function within the then() method is executed. That function contains the code for handling the data received from the API.<\/span><\/p>\n
      .catch –<\/b> The API you call using fetch() may be <\/span>down,<\/b> or <\/span>other errors may occur<\/b>. If this happens, the <\/span>reject promise<\/b> will be returned. The catch method is used to<\/span> handle reject<\/b>. The code within the catch() will be executed if an error occurs when calling the API of your choice.<\/span><\/p>\n
      GET Api using Fetch-<\/b><\/h3>\n
      \/\/ Get the Data from the URL<\/i><\/strong>\r\nfetch<\/span>(\"<\/span>URL<\/span>\")<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/strong><\/span>\/\/ Transform the data into json<\/i><\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(<\/span>(<\/span>res<\/span>)<\/span> =><\/span> res<\/span>.<\/span>json<\/span>())<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(<\/span>(<\/span>data<\/span>)<\/span> =><\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>console<\/span><\/i>.<\/span>log<\/span>(<\/span>data<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>catch<\/span>(<\/span>(<\/span>error<\/span>)<\/span>=><\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>console<\/span><\/i>.<\/span>log<\/span>(<\/span>error<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>;<\/span><\/pre>\n
      \/\/In fetch API default is GET method.<\/strong>\r\n\r\n<\/pre>\n
      CREATE Api using Fetch-<\/b><\/h3>\n
      Method<\/b> – \u2018 POST \u2019<\/span><\/p>\n
       \u00a0\u00a0\u00a0<\/span>\r\nfetch<\/span>(\"<\/span>URL<\/span>\",{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/strong><\/span>\/\/ method changes<\/i><\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>method<\/span>:<\/span> '<\/span>POST<\/span>',<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>body<\/span>:<\/span> JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>title<\/span>:<\/span> '<\/span>foo<\/span>',<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>body<\/span>:<\/span> '<\/span>bar<\/span>',<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>userId<\/span>:<\/span> 0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>headers<\/span>:<\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\"<\/span>Content-type<\/span>\":<\/span> \"<\/span>application\/json; charset=UTF-8<\/span>\"<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>})<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/ Transform the data into json<\/i><\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(<\/span>(<\/span>res<\/span>)<\/span> =><\/span> res<\/span>.<\/span>json<\/span>())<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(<\/span>(<\/span>data<\/span>)<\/span> =><\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>console<\/span><\/i>.<\/span>log<\/span>(<\/span>data<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>catch<\/span>(<\/span>(<\/span>error<\/span>)<\/span>=><\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>console<\/span><\/i>.<\/span>log<\/span>(<\/span>error<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>;<\/span>\r\n\r\n<\/pre>\n
      UPDATE Api using Fetch-<\/b><\/h3>\n
      Method<\/b> – \u2018 PUT \u2019<\/span><\/p>\n
      \u00a0\u00a0<\/span><\/p>\n
      fetch<\/span>(\"<\/span>URL<\/span>\",{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/ method changes<\/span><\/i>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>method<\/span>:<\/span> '<\/span>PUT<\/span>',<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>body<\/span>:<\/span> JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>title<\/span>:<\/span> '<\/span>foo<\/span>',<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>body<\/span>:<\/span> '<\/span>bar<\/span>',<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>userId<\/span>:<\/span> 0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>headers<\/span>:<\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\"<\/span>Content-type<\/span>\":<\/span> \"<\/span>application\/json; charset=UTF-8<\/span>\"<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>})<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/ Transform the data into json<\/span><\/i>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(<\/span>(<\/span>res<\/span>)<\/span> =><\/span> res<\/span>.<\/span>json<\/span>())<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(<\/span>(<\/span>data<\/span>)<\/span> =><\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>console<\/span><\/i>.<\/span>log<\/span>(<\/span>data<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>catch<\/span>(<\/span>(<\/span>error<\/span>)<\/span>=><\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>console<\/span><\/i>.<\/span>log<\/span>(<\/span>error<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>;<\/span><\/pre>\n
      <\/pre>\n
      DELETE Api using Fetch-<\/b><\/h3>\n
      Method – \u2018 <\/b>DELETE<\/span> \u2019<\/b><\/p>\n
      fetch<\/span>(\"<\/span>URL<\/span>\",<\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>method<\/span>:<\/span> '<\/span>DELETE<\/span>'<\/span>\r\n\u00a0\u00a0\u00a0<\/span>}<\/span> )<\/span><\/pre>\n
      <\/pre>\n
      Using Axios –\u00a0<\/b><\/h3>\n
      Axios is a stand-alone third-party package that uses data property. To use it, we need to install the axios package from npm.<\/span><\/p>\n
      $ npm i axios<\/strong>\r\n\/\/ This will download the axios\r\n\r\n<\/pre>\n
      Axios API Code Example –<\/b>\u00a0<\/span><\/h3>\n
      \u00a0\u00a0\u00a0axios<\/span>.<\/span>get<\/span>(<\/span>\"<\/span>URL<\/span>\"<\/span>)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>\/\/handling the response<\/span><\/i>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(<\/span>()<\/span> =><\/span> {<\/span>\r\n \u00a0\u00a0    \/\/ the code for handling the data you get from api<\/em><\/strong><\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>catch<\/span>(<\/span>(<\/span>error<\/span>)<\/span> =><\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/for handling the error thrown<\/i><\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>console<\/span><\/i>.<\/span>log<\/span>(<\/span>error<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)<\/span>;<\/span>\r\n\r\n<\/pre>\n
      GET Api using Axios –<\/b><\/h3>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0axios<\/span>.<\/span>get<\/span>(<\/span>\"<\/span>URL<\/span>\"<\/span>)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(res <\/span>=><\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>console<\/span><\/i>.<\/span>log<\/span>(<\/span>res<\/span>.<\/span>data<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>)\r\n<\/span>\/\/In axios API also default is GET method<\/span><\/em><\/pre>\n
       <\/p>\n
      POST Api using Axios-<\/b><\/h3>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>const<\/span><\/i> employee <\/span>=<\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>name<\/span>:<\/span> this<\/span><\/i>.<\/span>state<\/span>.<\/span>name<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>age<\/span>:<\/span> this<\/span><\/i>.<\/span>state<\/span>.<\/span>age<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>salary<\/span>:<\/span> this<\/span><\/i>.<\/span>state<\/span>.<\/span>salary<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>\r\n    \/\/ method .post<\/strong>\r\n\u00a0\u00a0\u00a0\u00a0axios<\/span>.<\/span>post<\/span>(<\/span>\"<\/span>URL<\/span>\",<\/span> employee)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(res <\/span>=><\/span> console<\/span><\/i>.<\/span>log<\/span>(<\/span>res<\/span>.<\/span>data<\/span>)<\/span>)<\/span>;<\/span>\r\n\r\n<\/pre>\n
      UPDATE Api using Axios-<\/b><\/h3>\n
      \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>const<\/span><\/i> employee <\/span>=<\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>name<\/span>:<\/span> this<\/span><\/i>.<\/span>state<\/span>.<\/span>name<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>age<\/span>:<\/span> this<\/span><\/i>.<\/span>state<\/span>.<\/span>age<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>salary<\/span>:<\/span> this<\/span><\/i>.<\/span>state<\/span>.<\/span>salary<\/span>,<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>\r\n    \/\/ method .put<\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0axios<\/span>.<\/span>put<\/span>(<\/span>\"<\/span>URL<\/span>\",<\/span> employee)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(res <\/span>=><\/span> console<\/span><\/i>.<\/span>log<\/span>(<\/span>res<\/span>.<\/span>data<\/span>)<\/span>)<\/span>;<\/span><\/pre>\n
      <\/pre>\n
      DELETE Api using Axios-<\/b><\/h3>\n
          \/\/ method .delete<\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0axios<\/span>.<\/span>delete<\/span>(<\/span>\"<\/span>URL<\/span>\"<\/span>)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>then<\/span>(res <\/span>=><\/span> console<\/span><\/i>.<\/span>log<\/span>(<\/span>res<\/span>.<\/span>data<\/span>)<\/span>)<\/span>;\r\n<\/span><\/pre>\n
      Async-Await Syntax-<\/b><\/h3>\n
      Using Async\/Await, we can write asynchronous code synchronously.<\/span><\/p>\n
      <\/pre>\n
      The async keyword before a function has two effects:<\/span><\/p>\n
        \n
      • Make it always return a promise.<\/span><\/li>\n
      • Allows awaiting to be used in it.<\/span><\/li>\n<\/ul>\n
        <\/pre>\n
        The await keyword before a promise makes JavaScript wait until that promise settles, and then:<\/span><\/p>\n
          \n
        • If it\u2019s an error, the exception is generated.<\/span><\/li>\n
        • Otherwise, it returns the result.<\/span><\/li>\n<\/ul>\n
          <\/pre>\n
          Code for fetch Async\/await-<\/b>\u00a0<\/span>\r\n \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>\/\/ declare the async data fetching function<\/i><\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>const<\/span><\/i> fetchData<\/span> =<\/span> async<\/span><\/i>()<\/span> =><\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>try<\/span>{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/ get the data from the api<\/i><\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>const<\/span><\/i> get_data <\/span>=<\/span> await<\/span> fetch<\/span>('<\/span>URL<\/span>');<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/ convert the data to json<\/i><\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>const<\/span><\/i> json <\/span>=<\/span> await<\/span> get_data<\/span>.<\/span>json<\/span>()<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>catch<\/span>(<\/span>error<\/span>){<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/ make sure to catch any error<\/i><\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>console<\/span><\/i>.<\/span>log<\/span>(<\/span>error<\/span>)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/ call the function<\/i><\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>fetchData<\/span>()\r\n\r\n<\/span><\/pre>\n
          Code for Axios Async\/await-<\/b>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>const<\/span><\/i> fetchData<\/span> =<\/span> async<\/span><\/i>()<\/span> =><\/span> {<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>try<\/span>{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>const<\/span><\/i> get_data <\/span>=<\/span> await<\/span> axios<\/span>.<\/span>get<\/span>(<\/span>\"<\/span>URL<\/span>\"<\/span>)<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\/\/remember in axios data is pre stored in json format<\/i><\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>catch<\/span>(<\/span>error<\/span>){<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>console<\/span><\/i>.<\/span>log<\/span>(<\/span>error<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>}<\/span>\r\n        \/\/ call the function<\/strong>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>fetchData<\/span>()\r\n<\/span><\/pre>\n
          This is how Axios fetches in data you have your array objects<\/span><\/p>\n
          \"\"<\/pre>\n
          This is how fetch fetch data in async\/await<\/span><\/p>\n
          \"\"<\/p>\n
           <\/p>\n
          \"\"<\/p>\n
          Both Axios and Fetch are almost similar in functionality, but some prefer Axios over Fetch for their built-in APIs for its ease of use.<\/span><\/p>\n
          In both the APIs result is same but there are some differences which are <\/b>–<\/span><\/h3>\n
            \n
          • Fetch API does not directly convert the data to <\/span>json <\/b>format. We have to tell it.<\/span><\/li>\n
          • But Axios converts data to json format for better readability.<\/span><\/li>\n
          • Axios has built-in <\/span>XSRF(Cross-Site Request Forgery)<\/b> protection, while Fetch does not.<\/span><\/li>\n
          • Axios has the ability to <\/span>intercept HTTP <\/b>requests but Fetch, by <\/span>default,<\/b> does not.<\/span><\/li>\n
          • Axios allows<\/span> canceling requests and request timeout<\/b> but fetch does not.<\/span><\/li>\n<\/ul>\n
            <\/div>","protected":false},"excerpt":{"rendered":"
            What is API? Why do we need them? API stands for \u201cApplication Programming Interface,\u201d which is a software intermediary that allows two applications to talk to each other.\u00a0APIs simplify how developers integrate new application components into existing architecture, they help business and IT teams collaborate. Business needs often change quickly in response to ever-shifting digital […]<\/p>\n","protected":false},"author":1519,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":38},"categories":[3038],"tags":[1832,5050,630,5051],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55923"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1519"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=55923"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55923\/revisions"}],"predecessor-version":[{"id":55926,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/55923\/revisions\/55926"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=55923"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=55923"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=55923"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}