{"id":2888,"date":"2024-11-12T21:38:42","date_gmt":"2024-11-12T14:38:42","guid":{"rendered":"https:\/\/fstack.io.vn\/?p=2888"},"modified":"2024-11-13T20:57:13","modified_gmt":"2024-11-13T13:57:13","slug":"axios-la-gi-cach-su-dung-aios-trong-1-du-an-react","status":"publish","type":"post","link":"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/","title":{"rendered":"Axios l\u00e0 g\u00ec ? C\u00e1ch s\u1eed d\u1ee5ng Axios trong 1 d\u1ef1 \u00e1n React"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2888\" class=\"elementor elementor-2888\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e881107 e-flex e-con-boxed e-con e-parent\" data-id=\"e881107\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a80f1f5 elementor-widget elementor-widget-heading\" data-id=\"a80f1f5\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Danh m\u1ee5c b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/#1axios_la_gi\" >1.axios l\u00e0 g\u00ec ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/#2_Cai_dat_va_thiet_lap_trong_du_an_react\" >2. C\u00e0i \u0111\u1eb7t v\u00e0 thi\u1ebft l\u1eadp trong d\u1ef1 \u00e1n react<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/#3_Thiet_lap_Axios_co_ban\" >3. Thi\u1ebft l\u1eadp Axios c\u01a1 b\u1ea3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/#4_Su_dung_Axios_trong_react\" >4. S\u1eed d\u1ee5ng Axios trong react<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/#Danh_sach_bai_viet\" >Danh s\u00e1ch b\u00e0i vi\u1ebft<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/#posttitle\" >{post.title}<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/#5Interceptors_trong_Axios\" >5.Interceptors trong Axios<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/#6Toi_uu_hoa_nhieu_yeu_cau_voi_axiosall\" >6.T\u1ed1i \u01b0u h\u00f3a nhi\u1ec1u y\u00eau c\u1ea7u v\u1edbi axios.all()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/fstack.io.vn\/blog\/axios-la-gi-cach-su-dung-aios-trong-1-du-an-react\/#7Ket_luan\" >7.K\u1ebft lu\u1eadn<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"1axios_la_gi\"><\/span>1.axios l\u00e0 g\u00ec ? <span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21f5e72 elementor-widget elementor-widget-text-editor\" data-id=\"21f5e72\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Axios l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n <a href=\"https:\/\/fstack.io.vn\/blog\/mot-so-cau-hoi-phong-van-javascript-tu-co-ban-den-nang-cao\/\">JavaScript<\/a> d\u00f9ng \u0111\u1ec3 g\u1eedi c\u00e1c y\u00eau c\u1ea7u HTTP t\u1eeb tr\u00ecnh duy\u1ec7t ho\u1eb7c <a href=\"https:\/\/fstack.io.vn\/blog\/node-js-la-gi-tat-tan-tat-ve-node-js\/\">Node.js<\/a>. Gi\u00fap h\u1ed7 tr\u1ee3 c\u00e1c t\u00ednh n\u0103ng n\u1ed5i b\u1eadt nh\u01b0:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-75b24be elementor-icon-list--layout-traditional elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"75b24be\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">D\u1ec5 d\u00e0ng g\u1eedi y\u00eau c\u1ea7u HTTP (GET, POST, PUT, DELETE)<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Qu\u1ea3n l\u00fd ph\u1ea3n h\u1ed3i JSON t\u1ef1 \u0111\u1ed9ng<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">H\u1ed7 tr\u1ee3 Interceptors \u0111\u1ec3 x\u1eed l\u00fd y\u00eau c\u1ea7u\/ph\u1ea3n h\u1ed3i tr\u01b0\u1edbc khi ho\u00e0n th\u00e0nh<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item\">\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-circle\"><\/i>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">C\u1ea5u h\u00ecnh d\u1ec5 d\u00e0ng v\u1edbi baseURL, headers, v.v.<\/span>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2ab5063 elementor-widget elementor-widget-heading\" data-id=\"2ab5063\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"2_Cai_dat_va_thiet_lap_trong_du_an_react\"><\/span>2. C\u00e0i \u0111\u1eb7t v\u00e0 thi\u1ebft l\u1eadp trong d\u1ef1 \u00e1n react<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5ab84a elementor-widget elementor-widget-text-editor\" data-id=\"e5ab84a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Tr\u01b0\u1edbc ti\u00ean, b\u1ea1n c\u1ea7n c\u00e0i \u0111\u1eb7t v\u00e0o d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh. M\u1edf terminal v\u00e0 ch\u1ea1y l\u1ec7nh sau:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-498a9d8 elementor-widget elementor-widget-code-highlight\" data-id=\"498a9d8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>yarn add axios\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e07899f elementor-widget elementor-widget-text-editor\" data-id=\"e07899f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ho\u1eb7c, n\u1ebfu b\u1ea1n d\u00f9ng npm:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4502146 elementor-widget elementor-widget-code-highlight\" data-id=\"4502146\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>npm install axios\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-879877e elementor-widget elementor-widget-heading\" data-id=\"879877e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"3_Thiet_lap_Axios_co_ban\"><\/span>3. Thi\u1ebft l\u1eadp Axios c\u01a1 b\u1ea3n<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c1079ac elementor-widget elementor-widget-text-editor\" data-id=\"c1079ac\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>T\u1ea1o m\u1ed9t file <code>axiosConfig.js<\/code> \u0111\u1ec3 c\u1ea5u h\u00ecnh c\u01a1 b\u1ea3n cho Axios, gi\u00fap \u0111\u01a1n gi\u1ea3n h\u00f3a vi\u1ec7c g\u1ecdi API sau n\u00e0y.\u00a0<\/p><p><span style=\"color: var(--postx_preset_contrast_2_color); font-family: var(--postx_preset_Body_and_Others_typo_font_family),var(--postx_preset_Body_and_Others_typo_font_family_type); font-size: var(--postx_preset_body_typo_font_size_lg, initial); font-style: var(--postx_preset_Body_and_Others_typo_font_style); font-weight: var(--postx_preset_Body_and_Others_typo_font_weight); letter-spacing: var(--postx_preset_Body_and_Others_typo_letter_spacing_lg, normal); text-transform: var(--postx_preset_Body_and_Others_typo_text_transform); text-align: var(--text-align); background-color: var(--postx_preset_base_1_color);\">V\u00ed d\u1ee5:<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e2c48b7 elementor-widget elementor-widget-code-highlight\" data-id=\"e2c48b7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ src\/axiosConfig.js\r\nimport axios from 'axios';\r\n\r\nconst axiosInstance = axios.create({\r\n  baseURL: 'https:\/\/jsonplaceholder.typicode.com', \/\/ API m\u1eabu\r\n  headers: {\r\n    'Content-Type': 'application\/json',\r\n  },\r\n});\r\n\r\nexport default axiosInstance;\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-60574bd elementor-widget elementor-widget-heading\" data-id=\"60574bd\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"4_Su_dung_Axios_trong_react\"><\/span>4. S\u1eed d\u1ee5ng Axios trong react<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-ebf77e6 elementor-widget elementor-widget-text-editor\" data-id=\"ebf77e6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>V\u00ed d\u1ee5 v\u1ec1 c\u00e1c ph\u01b0\u01a1ng th\u1ee9c HTTP c\u01a1 b\u1ea3n<\/b><\/p><p>Gi\u1ea3 s\u1eed b\u1ea1n \u0111ang c\u00f3 m\u1ed9t component <code>App.js<\/code>, d\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c v\u00ed d\u1ee5 m\u00e3 \u0111\u1ec3 s\u1eed d\u1ee5ng c\u00e1c ph\u01b0\u01a1ng th\u1ee9c HTTP.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8234e0b elementor-widget elementor-widget-code-highlight\" data-id=\"8234e0b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ src\/App.js\r\nimport <a href=\"https:\/\/fstack.io.vn\/blog\/react-query-la-gi-tai-sao-nen-dung-react-query\/\">React<\/a>, { useEffect, <a href=\"https:\/\/fstack.io.vn\/blog\/react-hook-la-gi-6-hook-co-ban-trong-react\/\">useState<\/a> } from 'react';\r\nimport axiosInstance from '.\/axiosConfig';\r\n\r\nfunction App() {\r\n  const [data, setData] = useState([]);\r\n  const [loading, setLoading] = useState(false);\r\n\r\n  \/\/ H\u00e0m GET: L\u1ea5y danh s\u00e1ch d\u1eef li\u1ec7u\r\n  const fetchData = async () => {\r\n    setLoading(true);\r\n    try {\r\n      const response = await axiosInstance.get('\/posts');\r\n      setData(response.data);\r\n    } catch (error) {\r\n      console.error('L\u1ed7i khi l\u1ea5y d\u1eef li\u1ec7u:', error);\r\n    }\r\n    setLoading(false);\r\n  };\r\n\r\n  \/\/ H\u00e0m POST: Th\u00eam d\u1eef li\u1ec7u m\u1edbi\r\n  const createData = async () => {\r\n    try {\r\n      const newPost = { title: 'Axios trong React', body: 'H\u01b0\u1edbng d\u1eabn c\u01a1 b\u1ea3n' };\r\n      const response = await axiosInstance.post('\/posts', newPost);\r\n      setData([response.data, ...data]);\r\n    } catch (error) {\r\n      console.error('L\u1ed7i khi t\u1ea1o d\u1eef li\u1ec7u:', error);\r\n    }\r\n  };\r\n\r\n  \/\/ H\u00e0m PUT: C\u1eadp nh\u1eadt d\u1eef li\u1ec7u\r\n  const updateData = async (id) => {\r\n    try {\r\n      const updatedPost = { title: '\u0110\u00e3 c\u1eadp nh\u1eadt v\u1edbi Axios' };\r\n      await axiosInstance.put(`\/posts\/${id}`, updatedPost);\r\n      setData(data.map((post) => (post.id === id ? { ...post, ...updatedPost } : post)));\r\n    } catch (error) {\r\n      console.error('L\u1ed7i khi c\u1eadp nh\u1eadt d\u1eef li\u1ec7u:', error);\r\n    }\r\n  };\r\n\r\n  \/\/ H\u00e0m DELETE: X\u00f3a d\u1eef li\u1ec7u\r\n  const deleteData = async (id) => {\r\n    try {\r\n      await axiosInstance.delete(`\/posts\/${id}`);\r\n      setData(data.filter((post) => post.id !== id));\r\n    } catch (error) {\r\n      console.error('L\u1ed7i khi x\u00f3a d\u1eef li\u1ec7u:', error);\r\n    }\r\n  };\r\n\r\n  useEffect(() => {\r\n    fetchData();\r\n  }, []);\r\n\r\n  return (\r\n    <div>\r\n      <h1><span class=\"ez-toc-section\" id=\"Danh_sach_bai_viet\"><\/span>Danh s\u00e1ch b\u00e0i vi\u1ebft<span class=\"ez-toc-section-end\"><\/span><\/h1>\r\n      {loading && <p>\u0110ang t\u1ea3i...<\/p>}\r\n      <button onClick={createData}>Th\u00eam b\u00e0i vi\u1ebft<\/button>\r\n      <ul>\r\n        {data.map((post) => (\r\n          <li key={post.id}>\r\n            <h2><span class=\"ez-toc-section\" id=\"posttitle\"><\/span>{post.title}<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n            <p>{post.body}<\/p>\r\n            <button onClick={() => updateData(post.id)}>C\u1eadp nh\u1eadt<\/button>\r\n            <button onClick={() => deleteData(post.id)}>X\u00f3a<\/button>\r\n          <\/li>\r\n        ))}\r\n      <\/ul>\r\n    <\/div>\r\n  );\r\n}\r\n\r\nexport default App;\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a436267 elementor-widget elementor-widget-heading\" data-id=\"a436267\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"5Interceptors_trong_Axios\"><\/span>5.Interceptors trong Axios<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8296bff elementor-widget elementor-widget-text-editor\" data-id=\"8296bff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>B\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng Interceptors \u0111\u1ec3 th\u00eam token v\u00e0o header tr\u01b0\u1edbc khi g\u1eedi y\u00eau c\u1ea7u:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cf3f822 elementor-widget elementor-widget-code-highlight\" data-id=\"cf3f822\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\/\/ src\/axiosConfig.js\r\naxiosInstance.interceptors.request.use(\r\n  (config) => {\r\n    const token = localStorage.getItem('token');\r\n    if (token) {\r\n      config.headers.Authorization = `Bearer ${token}`;\r\n    }\r\n    return config;\r\n  },\r\n  (error) => Promise.reject(error)\r\n);\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-edb7cc4 elementor-widget elementor-widget-text-editor\" data-id=\"edb7cc4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>thi\u1ebft l\u1eadp Interceptor cho response :<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2f698e7 elementor-widget elementor-widget-code-highlight\" data-id=\"2f698e7\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>\n\/\/ Interceptor cho response\naxiosInstance.interceptors.response.use(\n  (response) => {\n    \/\/ X\u1eed l\u00fd response tr\u01b0\u1edbc khi tr\u1ea3 v\u1ec1 cho component\n    \/\/ V\u00ed d\u1ee5: ch\u1ec9 l\u1ea5y ph\u1ea7n d\u1eef li\u1ec7u c\u1ea7n thi\u1ebft\n    return response.data;\n  },\n  (error) => {\n    \/\/ X\u1eed l\u00fd l\u1ed7i to\u00e0n c\u1ee5c\n    if (error.response) {\n      \/\/ X\u1eed l\u00fd l\u1ed7i t\u1eeb server, v\u00ed d\u1ee5 l\u1ed7i x\u00e1c th\u1ef1c\n      if (error.response.status === 401) {\n        console.error('B\u1ea1n kh\u00f4ng c\u00f3 quy\u1ec1n truy c\u1eadp. Vui l\u00f2ng \u0111\u0103ng nh\u1eadp l\u1ea1i.');\n      } else if (error.response.status === 404) {\n        console.error('D\u1eef li\u1ec7u kh\u00f4ng t\u00ecm th\u1ea5y.');\n      }\n    } else if (error.request) {\n      console.error('Kh\u00f4ng c\u00f3 ph\u1ea3n h\u1ed3i t\u1eeb server.');\n    } else {\n      console.error('L\u1ed7i khi thi\u1ebft l\u1eadp y\u00eau c\u1ea7u:', error.message);\n    }\n    return Promise.reject(error);\n  }\n);<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8a45adf elementor-widget elementor-widget-heading\" data-id=\"8a45adf\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"6Toi_uu_hoa_nhieu_yeu_cau_voi_axiosall\"><\/span>6.T\u1ed1i \u01b0u h\u00f3a nhi\u1ec1u y\u00eau c\u1ea7u v\u1edbi <code>axios.all()<\/code><span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7918659 elementor-widget elementor-widget-text-editor\" data-id=\"7918659\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>S\u1eed d\u1ee5ng <code>axios.all()<\/code> \u0111\u1ec3 g\u1eedi nhi\u1ec1u y\u00eau c\u1ea7u \u0111\u1ed3ng th\u1eddi, gi\u00fap t\u1ed1i \u01b0u h\u00f3a t\u1ed1c \u0111\u1ed9 t\u1ea3i d\u1eef li\u1ec7u:<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f62a9a8 elementor-widget elementor-widget-code-highlight\" data-id=\"f62a9a8\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>const fetchDataConcurrently = async () => {\r\n  try {\r\n    const [posts, comments] = await axios.all([\r\n      axiosInstance.get('\/posts'),\r\n      axiosInstance.get('\/comments'),\r\n    ]);\r\n    console.log('B\u00e0i vi\u1ebft:', posts.data);\r\n    console.log('B\u00ecnh lu\u1eadn:', comments.data);\r\n  } catch (error) {\r\n    handleError(error);\r\n  }\r\n};\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9c879cc elementor-widget elementor-widget-heading\" data-id=\"9c879cc\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><span class=\"ez-toc-section\" id=\"7Ket_luan\"><\/span>7.K\u1ebft lu\u1eadn<span class=\"ez-toc-section-end\"><\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cd57a54 elementor-widget elementor-widget-text-editor\" data-id=\"cd57a54\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>V\u1edbi nh\u1eefng v\u00ed d\u1ee5 tr\u00ean, b\u1ea1n \u0111\u00e3 c\u00f3 th\u1ec3 n\u1eafm \u0111\u01b0\u1ee3c c\u00e1ch d\u00f9ng Axios trong React \u0111\u1ec3 th\u1ef1c hi\u1ec7n c\u00e1c thao t\u00e1c HTTP ph\u1ed5 bi\u1ebfn nh\u01b0 GET, POST, PUT, DELETE. T\u1eadn d\u1ee5ng c\u00e1c t\u00ednh n\u0103ng m\u1ea1nh m\u1ebd c\u1ee7a Axios s\u1ebd gi\u00fap \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n d\u1ec5 d\u00e0ng qu\u1ea3n l\u00fd d\u1eef li\u1ec7u v\u00e0 x\u1eed l\u00fd l\u1ed7i.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b80ff3 elementor-widget elementor-widget-heading\" data-id=\"4b80ff3\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<p class=\"elementor-heading-title elementor-size-default\"><a href=\"https:\/\/axios-http.com\/docs\/intro\" rel=\"nofollow noopener\" target=\"_blank\">Click \u0111\u1ec3 xem th\u00eam chi ti\u1ebft<\/a><\/p>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8e1f548 elementor-widget elementor-widget-text-editor\" data-id=\"8e1f548\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u1ede tr\u00ean l\u00e0 1 s\u1ed1 chia s\u1ebb v\u1ec1 axios c\u1ee7a m\u00ecnh, v\u00ec \u0111\u00e2y \u0111a ph\u1ea7n l\u00e0 ki\u1ebfn th\u1ee9c m\u00ecnh t\u1ef1 h\u1ecdc n\u00ean c\u00f3 th\u1ec3 b\u00e0i vi\u1ebft n\u00e0y c\u00f3 th\u1ec3 c\u00f3 nhi\u1ec1u ch\u1ed7 ch\u01b0a ch\u00ednh x\u00e1c v\u00e0 thi\u1ebfu s\u00f3t, mong m\u1ecdi ng\u01b0\u1eddi g\u00f3p \u00fd \u1edf d\u01b0\u1edbi ph\u1ea7n b\u00ecnh lu\u1eadn \u0111\u1ec3 b\u00e0i vi\u1ebft th\u00eam ho\u00e0n ch\u1ec9nh v\u00e0 x\u00e2y d\u1ef1ng m\u1ed9t c\u1ed9ng \u0111\u1ed3ng n\u01a1i m\u1ecdi ng\u01b0\u1eddi c\u00f3 th\u1ec3 chia s\u1ebb kinh nghi\u1ec7m\u00a0<a href=\"https:\/\/fstack.io.vn\/lap-trinh-la-gi-mot-so-dac-diem-cua-lap-trinh-ma-ban-nen-biet\/\">l\u1eadp tr\u00ecnh<\/a>\u00a0cho nhau\u00a0\ud83d\ude18.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>1.axios l\u00e0 g\u00ec ? Axios l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n JavaScript d\u00f9ng \u0111\u1ec3 g\u1eedi c\u00e1c y\u00eau c\u1ea7u HTTP t\u1eeb tr\u00ecnh duy\u1ec7t ho\u1eb7c Node.js. Gi\u00fap h\u1ed7 tr\u1ee3 c\u00e1c t\u00ednh n\u0103ng n\u1ed5i b\u1eadt nh\u01b0: D\u1ec5 d\u00e0ng g\u1eedi y\u00eau c\u1ea7u HTTP (GET, POST, PUT, DELETE) Qu\u1ea3n l\u00fd ph\u1ea3n h\u1ed3i JSON t\u1ef1 \u0111\u1ed9ng H\u1ed7 tr\u1ee3 Interceptors \u0111\u1ec3 x\u1eed l\u00fd y\u00eau [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":2899,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1,48,25,43],"tags":[71,72],"class_list":["post-2888","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cong-nghe","category-lap-trinh","category-nextjs","category-react-cong-nghe","tag-axios","tag-axios-npm"],"acf":[],"jetpack_featured_media_url":"https:\/\/fstack.io.vn\/blog\/wp-content\/uploads\/2024\/11\/axios-1.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2888","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/comments?post=2888"}],"version-history":[{"count":17,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2888\/revisions"}],"predecessor-version":[{"id":2929,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/posts\/2888\/revisions\/2929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media\/2899"}],"wp:attachment":[{"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/media?parent=2888"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/categories?post=2888"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fstack.io.vn\/blog\/wp-json\/wp\/v2\/tags?post=2888"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}