{"id":17658,"date":"2024-03-15T15:27:20","date_gmt":"2024-03-15T15:27:20","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/"},"modified":"2024-03-21T11:25:53","modified_gmt":"2024-03-21T11:25:53","slug":"how-does-react-access-api-to-fetch-data","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/","title":{"rendered":"How does React access API to fetch data?"},"content":{"rendered":"<p>In React, you can use libraries like fetch or axios to make API calls and fetch data.<\/p>\n<p>Here is an example code using fetch:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-title function_\">fetch<\/span>(<span class=\"hljs-string\">'https:\/\/api.example.com\/data'<\/span>)\r\n  .<span class=\"hljs-title function_\">then<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">response<\/span> =&gt;<\/span> response.<span class=\"hljs-title function_\">json<\/span>())\r\n  .<span class=\"hljs-title function_\">then<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">data<\/span> =&gt;<\/span> {\r\n    <span class=\"hljs-comment\">\/\/ \u5904\u7406\u83b7\u53d6\u5230\u7684\u6570\u636e<\/span>\r\n    <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(data);\r\n  })\r\n  .<span class=\"hljs-title function_\">catch<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">error<\/span> =&gt;<\/span> {\r\n    <span class=\"hljs-comment\">\/\/ \u5904\u7406\u9519\u8bef<\/span>\r\n    <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">error<\/span>(error);\r\n  });\r\n<\/code><\/pre>\n<p>The example code using axios is as follows:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> axios <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'axios'<\/span>;\r\n\r\naxios.<span class=\"hljs-title function_\">get<\/span>(<span class=\"hljs-string\">'https:\/\/api.example.com\/data'<\/span>)\r\n  .<span class=\"hljs-title function_\">then<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">response<\/span> =&gt;<\/span> {\r\n    <span class=\"hljs-comment\">\/\/ \u5904\u7406\u83b7\u53d6\u5230\u7684\u6570\u636e<\/span>\r\n    <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(response.<span class=\"hljs-property\">data<\/span>);\r\n  })\r\n  .<span class=\"hljs-title function_\">catch<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">error<\/span> =&gt;<\/span> {\r\n    <span class=\"hljs-comment\">\/\/ \u5904\u7406\u9519\u8bef<\/span>\r\n    <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">error<\/span>(error);\r\n  });\r\n<\/code><\/pre>\n<p>In actual development, the logic for retrieving data is often placed in React component lifecycle methods, such as componentDidMount, so that data can be immediately obtained after the component is mounted. The retrieved data can be stored in the component&#8217;s state, and then used in the render method.<\/p>\n<p>for example<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span>, { <span class=\"hljs-title class_\">Component<\/span> } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> axios <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'axios'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title class_\">MyComponent<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title class_ inherited__\">Component<\/span> {\r\n  state = {\r\n    <span class=\"hljs-attr\">data<\/span>: <span class=\"hljs-literal\">null<\/span>,\r\n    <span class=\"hljs-attr\">error<\/span>: <span class=\"hljs-literal\">null<\/span>,\r\n  };\r\n\r\n  <span class=\"hljs-title function_\">componentDidMount<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n    axios.<span class=\"hljs-title function_\">get<\/span>(<span class=\"hljs-string\">'https:\/\/api.example.com\/data'<\/span>)\r\n      .<span class=\"hljs-title function_\">then<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">response<\/span> =&gt;<\/span> {\r\n        <span class=\"hljs-comment\">\/\/ \u66f4\u65b0\u7ec4\u4ef6\u72b6\u6001<\/span>\r\n        <span class=\"hljs-variable language_\">this<\/span>.<span class=\"hljs-title function_\">setState<\/span>({ <span class=\"hljs-attr\">data<\/span>: response.<span class=\"hljs-property\">data<\/span> });\r\n      })\r\n      .<span class=\"hljs-title function_\">catch<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">error<\/span> =&gt;<\/span> {\r\n        <span class=\"hljs-comment\">\/\/ \u66f4\u65b0\u7ec4\u4ef6\u72b6\u6001<\/span>\r\n        <span class=\"hljs-variable language_\">this<\/span>.<span class=\"hljs-title function_\">setState<\/span>({ <span class=\"hljs-attr\">error<\/span>: error.<span class=\"hljs-property\">message<\/span> });\r\n      });\r\n  }\r\n\r\n  <span class=\"hljs-title function_\">render<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n    <span class=\"hljs-keyword\">const<\/span> { data, error } = <span class=\"hljs-variable language_\">this<\/span>.<span class=\"hljs-property\">state<\/span>;\r\n\r\n    <span class=\"hljs-keyword\">if<\/span> (error) {\r\n      <span class=\"hljs-keyword\">return<\/span> <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>Error: {error}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>;\r\n    }\r\n\r\n    <span class=\"hljs-keyword\">if<\/span> (!data) {\r\n      <span class=\"hljs-keyword\">return<\/span> <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>Loading...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>;\r\n    }\r\n\r\n    <span class=\"hljs-keyword\">return<\/span> (\r\n      <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n        {\/* \u4f7f\u7528\u83b7\u53d6\u5230\u7684\u6570\u636e\u6e32\u67d3\u7ec4\u4ef6 *\/}\r\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\r\n    );\r\n  }\r\n}\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">MyComponent<\/span>;\r\n<\/code><\/pre>\n<p>In the above code, the component calls the componentDidMount method after mounting, where axios is used to make a request and store the retrieved data in the component&#8217;s state. The render method renders different content based on the component&#8217;s state.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In React, you can use libraries like fetch or axios to make API calls and fetch data. Here is an example code using fetch: fetch(&#8216;https:\/\/api.example.com\/data&#8217;) .then(response =&gt; response.json()) .then(data =&gt; { \/\/ \u5904\u7406\u83b7\u53d6\u5230\u7684\u6570\u636e console.log(data); }) .catch(error =&gt; { \/\/ \u5904\u7406\u9519\u8bef console.error(error); }); The example code using axios is as follows: import axios from &#8216;axios&#8217;; axios.get(&#8216;https:\/\/api.example.com\/data&#8217;) [&hellip;]<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-17658","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How does React access API to fetch data? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How does React access API to fetch data?\" \/>\n<meta property=\"og:description\" content=\"In React, you can use libraries like fetch or axios to make API calls and fetch data. Here is an example code using fetch: fetch(&#039;https:\/\/api.example.com\/data&#039;) .then(response =&gt; response.json()) .then(data =&gt; { \/\/ \u5904\u7406\u83b7\u53d6\u5230\u7684\u6570\u636e console.log(data); }) .catch(error =&gt; { \/\/ \u5904\u7406\u9519\u8bef console.error(error); }); The example code using axios is as follows: import axios from &#039;axios&#039;; axios.get(&#039;https:\/\/api.example.com\/data&#039;) [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-15T15:27:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:25:53+00:00\" \/>\n<meta name=\"author\" content=\"Ava Mitchell\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ava Mitchell\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/\"},\"author\":{\"name\":\"Ava Mitchell\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\"},\"headline\":\"How does React access API to fetch data?\",\"datePublished\":\"2024-03-15T15:27:20+00:00\",\"dateModified\":\"2024-03-21T11:25:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/\"},\"wordCount\":133,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/\",\"name\":\"How does React access API to fetch data? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:27:20+00:00\",\"dateModified\":\"2024-03-21T11:25:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How does React access API to fetch data?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64\",\"name\":\"Ava Mitchell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g\",\"caption\":\"Ava Mitchell\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How does React access API to fetch data? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/","og_locale":"en_US","og_type":"article","og_title":"How does React access API to fetch data?","og_description":"In React, you can use libraries like fetch or axios to make API calls and fetch data. Here is an example code using fetch: fetch('https:\/\/api.example.com\/data') .then(response =&gt; response.json()) .then(data =&gt; { \/\/ \u5904\u7406\u83b7\u53d6\u5230\u7684\u6570\u636e console.log(data); }) .catch(error =&gt; { \/\/ \u5904\u7406\u9519\u8bef console.error(error); }); The example code using axios is as follows: import axios from 'axios'; axios.get('https:\/\/api.example.com\/data') [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:27:20+00:00","article_modified_time":"2024-03-21T11:25:53+00:00","author":"Ava Mitchell","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Ava Mitchell","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/"},"author":{"name":"Ava Mitchell","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64"},"headline":"How does React access API to fetch data?","datePublished":"2024-03-15T15:27:20+00:00","dateModified":"2024-03-21T11:25:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/"},"wordCount":133,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/","url":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/","name":"How does React access API to fetch data? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:27:20+00:00","dateModified":"2024-03-21T11:25:53+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-does-react-access-api-to-fetch-data\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How does React access API to fetch data?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/a3e2658c2cb9fb2be95ae0a8861f4a64","name":"Ava Mitchell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/15c63cd0564b4a2e07d611bcdffa296f6ea80e8db07c3091f43a84010514899d?s=96&d=mm&r=g","caption":"Ava Mitchell"},"url":"https:\/\/www.silicloud.com\/blog\/author\/avamitchell\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17658","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=17658"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17658\/revisions"}],"predecessor-version":[{"id":51283,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17658\/revisions\/51283"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}