{"id":21045,"date":"2024-03-15T21:25:25","date_gmt":"2024-03-15T21:25:25","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/"},"modified":"2024-03-21T19:32:55","modified_gmt":"2024-03-21T19:32:55","slug":"how-to-encapsulate-axios-request-interface","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/","title":{"rendered":"How to encapsulate axios request interface?"},"content":{"rendered":"<p>To encapsulate axios request interface, you can follow the steps below:<\/p>\n<ol>\n<li>To install axios: use npm or yarn to install the axios library, you can execute the following command in the command line:<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code>npm install axios\r\n<\/code><\/pre>\n<p>Perhaps<\/p>\n<pre class=\"post-pre\"><code>yarn add axios\r\n<\/code><\/pre>\n<ol>\n<li>Create a file named api.js: Create a file named api.js in the src directory of the project, and import the axios library into the file.<\/li>\n<\/ol>\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\n<span class=\"hljs-comment\">\/\/ \u521b\u5efaaxios\u5b9e\u4f8b<\/span>\r\n<span class=\"hljs-keyword\">const<\/span> service = axios.<span class=\"hljs-title function_\">create<\/span>({\r\n  <span class=\"hljs-attr\">baseURL<\/span>: <span class=\"hljs-string\">'http:\/\/api.example.com'<\/span>,  <span class=\"hljs-comment\">\/\/ \u8bbe\u7f6e\u63a5\u53e3\u7684\u57fa\u7840url<\/span>\r\n  <span class=\"hljs-attr\">timeout<\/span>: <span class=\"hljs-number\">5000<\/span>  <span class=\"hljs-comment\">\/\/ \u8bbe\u7f6e\u8d85\u65f6\u65f6\u95f4<\/span>\r\n});\r\n\r\n<span class=\"hljs-comment\">\/\/ \u8bf7\u6c42\u62e6\u622a\u5668<\/span>\r\nservice.<span class=\"hljs-property\">interceptors<\/span>.<span class=\"hljs-property\">request<\/span>.<span class=\"hljs-title function_\">use<\/span>(\r\n  <span class=\"hljs-function\"><span class=\"hljs-params\">config<\/span> =&gt;<\/span> {\r\n    <span class=\"hljs-comment\">\/\/ \u5728\u53d1\u9001\u8bf7\u6c42\u4e4b\u524d\u53ef\u4ee5\u8fdb\u884c\u4e00\u4e9b\u5904\u7406\uff0c\u5982\u6dfb\u52a0token\u7b49<\/span>\r\n    <span class=\"hljs-keyword\">return<\/span> config;\r\n  },\r\n  <span class=\"hljs-function\"><span class=\"hljs-params\">error<\/span> =&gt;<\/span> {\r\n    <span class=\"hljs-comment\">\/\/ \u8bf7\u6c42\u9519\u8bef\u65f6\u7684\u5904\u7406<\/span>\r\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-title class_\">Promise<\/span>.<span class=\"hljs-title function_\">reject<\/span>(error);\r\n  }\r\n);\r\n\r\n<span class=\"hljs-comment\">\/\/ \u54cd\u5e94\u62e6\u622a\u5668<\/span>\r\nservice.<span class=\"hljs-property\">interceptors<\/span>.<span class=\"hljs-property\">response<\/span>.<span class=\"hljs-title function_\">use<\/span>(\r\n  <span class=\"hljs-function\"><span class=\"hljs-params\">response<\/span> =&gt;<\/span> {\r\n    <span class=\"hljs-comment\">\/\/ \u5bf9\u54cd\u5e94\u6570\u636e\u8fdb\u884c\u5904\u7406\uff0c\u5982\u7edf\u4e00\u5904\u7406\u9519\u8bef\u4fe1\u606f\u7b49<\/span>\r\n    <span class=\"hljs-keyword\">return<\/span> response.<span class=\"hljs-property\">data<\/span>;\r\n  },\r\n  <span class=\"hljs-function\"><span class=\"hljs-params\">error<\/span> =&gt;<\/span> {\r\n    <span class=\"hljs-comment\">\/\/ \u54cd\u5e94\u9519\u8bef\u65f6\u7684\u5904\u7406<\/span>\r\n    <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-title class_\">Promise<\/span>.<span class=\"hljs-title function_\">reject<\/span>(error);\r\n  }\r\n);\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> service;\r\n<\/code><\/pre>\n<ol>\n<li>Using the encapsulated axios interface: In places where axios requests are needed, you can import the api.js file and use the encapsulated axios interface for the request operation, for example:<\/li>\n<\/ol>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> api <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/api'<\/span>;\r\n\r\n<span class=\"hljs-comment\">\/\/ \u4f7f\u7528get\u8bf7\u6c42<\/span>\r\napi.<span class=\"hljs-title function_\">get<\/span>(<span class=\"hljs-string\">'\/user'<\/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-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(response);\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-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(error);\r\n  });\r\n\r\n<span class=\"hljs-comment\">\/\/ \u4f7f\u7528post\u8bf7\u6c42<\/span>\r\napi.<span class=\"hljs-title function_\">post<\/span>(<span class=\"hljs-string\">'\/user'<\/span>, { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'John'<\/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-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(response);\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-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(error);\r\n  });\r\n<\/code><\/pre>\n<p>This completes the operation of encapsulating axios request interfaces. In use, common request methods such as get, post, put, delete, etc. can be further encapsulated according to actual needs to facilitate their use in the project.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To encapsulate axios request interface, you can follow the steps below: To install axios: use npm or yarn to install the axios library, you can execute the following command in the command line: npm install axios Perhaps yarn add axios Create a file named api.js: Create a file named api.js in the src directory of [&hellip;]<\/p>\n","protected":false},"author":11,"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-21045","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 to encapsulate axios request interface? - 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-to-encapsulate-axios-request-interface\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to encapsulate axios request interface?\" \/>\n<meta property=\"og:description\" content=\"To encapsulate axios request interface, you can follow the steps below: To install axios: use npm or yarn to install the axios library, you can execute the following command in the command line: npm install axios Perhaps yarn add axios Create a file named api.js: Create a file named api.js in the src directory of [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/\" \/>\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-15T21:25:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T19:32:55+00:00\" \/>\n<meta name=\"author\" content=\"Olivia Parker\" \/>\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=\"Olivia Parker\" \/>\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-to-encapsulate-axios-request-interface\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/\"},\"author\":{\"name\":\"Olivia Parker\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\"},\"headline\":\"How to encapsulate axios request interface?\",\"datePublished\":\"2024-03-15T21:25:25+00:00\",\"dateModified\":\"2024-03-21T19:32:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/\"},\"wordCount\":134,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/\",\"name\":\"How to encapsulate axios request interface? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T21:25:25+00:00\",\"dateModified\":\"2024-03-21T19:32:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to encapsulate axios request interface?\"}]},{\"@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\/3ff7b3da0e45ac5dbbef2502f3cea8d9\",\"name\":\"Olivia Parker\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g\",\"caption\":\"Olivia Parker\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to encapsulate axios request interface? - 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-to-encapsulate-axios-request-interface\/","og_locale":"en_US","og_type":"article","og_title":"How to encapsulate axios request interface?","og_description":"To encapsulate axios request interface, you can follow the steps below: To install axios: use npm or yarn to install the axios library, you can execute the following command in the command line: npm install axios Perhaps yarn add axios Create a file named api.js: Create a file named api.js in the src directory of [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T21:25:25+00:00","article_modified_time":"2024-03-21T19:32:55+00:00","author":"Olivia Parker","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Olivia Parker","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/"},"author":{"name":"Olivia Parker","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9"},"headline":"How to encapsulate axios request interface?","datePublished":"2024-03-15T21:25:25+00:00","dateModified":"2024-03-21T19:32:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/"},"wordCount":134,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/","name":"How to encapsulate axios request interface? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T21:25:25+00:00","dateModified":"2024-03-21T19:32:55+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-encapsulate-axios-request-interface\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to encapsulate axios request interface?"}]},{"@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\/3ff7b3da0e45ac5dbbef2502f3cea8d9","name":"Olivia Parker","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/56c66f189ba32a6f9eb50f31a38fe774e2a725c213d4070835ccc51b8fbbc54b?s=96&d=mm&r=g","caption":"Olivia Parker"},"url":"https:\/\/www.silicloud.com\/blog\/author\/oliviaparker\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21045","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\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=21045"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21045\/revisions"}],"predecessor-version":[{"id":54884,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21045\/revisions\/54884"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=21045"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=21045"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=21045"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}