{"id":21024,"date":"2024-03-15T21:23:27","date_gmt":"2024-03-15T21:23:27","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/"},"modified":"2024-03-21T19:29:53","modified_gmt":"2024-03-21T19:29:53","slug":"what-is-the-method-for-encapsulating-axios","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/","title":{"rendered":"What is the method for encapsulating axios?"},"content":{"rendered":"<p>The steps for encapsulating Axios methods can be as follows:<\/p>\n<ol>\n<li>Create an axios instance: Use the method axios.create() to create an axios instance and apply some global settings, such as setting a baseURL and configuring request headers.<\/li>\n<li>Create a wrapper function: encapsulate various request methods as needed, such as GET, POST, etc. Within these functions, you can send requests by calling methods of the axios instance and perform some processing on the request, such as setting request headers, handling response results, etc.<\/li>\n<li>Export encapsulated functions: exporting encapsulated functions using export for importing and using in other places.<\/li>\n<\/ol>\n<p>Here is an example code snippet for encapsulating a GET request:<\/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\n<span class=\"hljs-comment\">\/\/ \u521b\u5efaaxios\u5b9e\u4f8b<\/span>\r\n<span class=\"hljs-keyword\">const<\/span> instance = axios.<span class=\"hljs-title function_\">create<\/span>({\r\n  <span class=\"hljs-attr\">baseURL<\/span>: <span class=\"hljs-string\">'https:\/\/api.example.com'<\/span>, <span class=\"hljs-comment\">\/\/ \u8bbe\u7f6e\u8bf7\u6c42\u7684baseURL<\/span>\r\n  <span class=\"hljs-attr\">timeout<\/span>: <span class=\"hljs-number\">5000<\/span>, <span class=\"hljs-comment\">\/\/ \u8bbe\u7f6e\u8bf7\u6c42\u8d85\u65f6\u65f6\u95f4<\/span>\r\n  <span class=\"hljs-attr\">headers<\/span>: {\r\n    <span class=\"hljs-string\">'Content-Type'<\/span>: <span class=\"hljs-string\">'application\/json'<\/span>, <span class=\"hljs-comment\">\/\/ \u8bbe\u7f6e\u8bf7\u6c42\u5934\u7684Content-Type<\/span>\r\n  },\r\n});\r\n\r\n<span class=\"hljs-comment\">\/\/ \u5c01\u88c5GET\u8bf7\u6c42\u65b9\u6cd5<\/span>\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">get<\/span>(<span class=\"hljs-params\">url, params<\/span>) {\r\n  <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> <span class=\"hljs-title class_\">Promise<\/span>(<span class=\"hljs-function\">(<span class=\"hljs-params\">resolve, reject<\/span>) =&gt;<\/span> {\r\n    instance\r\n      .<span class=\"hljs-title function_\">get<\/span>(url, { params })\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-title function_\">resolve<\/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-title function_\">reject<\/span>(error);\r\n      });\r\n  });\r\n}\r\n<\/code><\/pre>\n<p>In other places, you can import the get function and call it to send a GET request.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> { get } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/api'<\/span>;\r\n\r\n<span class=\"hljs-title function_\">get<\/span>(<span class=\"hljs-string\">'\/user'<\/span>, { <span class=\"hljs-attr\">id<\/span>: <span class=\"hljs-number\">1<\/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-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-variable language_\">console<\/span>.<span class=\"hljs-title function_\">error<\/span>(error);\r\n  });\r\n<\/code><\/pre>\n<p>Other types of request methods, such as POST and PUT, can also be encapsulated in a similar manner.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The steps for encapsulating Axios methods can be as follows: Create an axios instance: Use the method axios.create() to create an axios instance and apply some global settings, such as setting a baseURL and configuring request headers. Create a wrapper function: encapsulate various request methods as needed, such as GET, POST, etc. Within these functions, [&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-21024","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>What is the method for encapsulating axios? - 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\/what-is-the-method-for-encapsulating-axios\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is the method for encapsulating axios?\" \/>\n<meta property=\"og:description\" content=\"The steps for encapsulating Axios methods can be as follows: Create an axios instance: Use the method axios.create() to create an axios instance and apply some global settings, such as setting a baseURL and configuring request headers. Create a wrapper function: encapsulate various request methods as needed, such as GET, POST, etc. Within these functions, [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/\" \/>\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:23:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T19:29:53+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\/what-is-the-method-for-encapsulating-axios\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/\"},\"author\":{\"name\":\"Olivia Parker\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9\"},\"headline\":\"What is the method for encapsulating axios?\",\"datePublished\":\"2024-03-15T21:23:27+00:00\",\"dateModified\":\"2024-03-21T19:29:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/\"},\"wordCount\":151,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/\",\"name\":\"What is the method for encapsulating axios? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T21:23:27+00:00\",\"dateModified\":\"2024-03-21T19:29:53+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What is the method for encapsulating axios?\"}]},{\"@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":"What is the method for encapsulating axios? - 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\/what-is-the-method-for-encapsulating-axios\/","og_locale":"en_US","og_type":"article","og_title":"What is the method for encapsulating axios?","og_description":"The steps for encapsulating Axios methods can be as follows: Create an axios instance: Use the method axios.create() to create an axios instance and apply some global settings, such as setting a baseURL and configuring request headers. Create a wrapper function: encapsulate various request methods as needed, such as GET, POST, etc. Within these functions, [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T21:23:27+00:00","article_modified_time":"2024-03-21T19:29:53+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\/what-is-the-method-for-encapsulating-axios\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/"},"author":{"name":"Olivia Parker","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/3ff7b3da0e45ac5dbbef2502f3cea8d9"},"headline":"What is the method for encapsulating axios?","datePublished":"2024-03-15T21:23:27+00:00","dateModified":"2024-03-21T19:29:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/"},"wordCount":151,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/","url":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/","name":"What is the method for encapsulating axios? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T21:23:27+00:00","dateModified":"2024-03-21T19:29:53+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-axios\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What is the method for encapsulating axios?"}]},{"@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\/21024","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=21024"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21024\/revisions"}],"predecessor-version":[{"id":54861,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/21024\/revisions\/54861"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=21024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=21024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=21024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}