{"id":18085,"date":"2024-03-15T16:13:19","date_gmt":"2024-03-15T16:13:19","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/"},"modified":"2024-03-21T12:27:51","modified_gmt":"2024-03-21T12:27:51","slug":"what-is-the-method-for-encapsulating-request-interfaces-in-axios","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/","title":{"rendered":"What is the method for encapsulating request interfaces in axios?"},"content":{"rendered":"<p>One way to encapsulate request interfaces using axios is by creating an axios instance and using that instance to send requests. Here is an example of how to encapsulate a request interface using axios.<\/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\">\/\/ \u8bf7\u6c42\u7684\u57fa\u7840URL<\/span>\r\n  <span class=\"hljs-attr\">timeout<\/span>: <span class=\"hljs-number\">5000<\/span>, <span class=\"hljs-comment\">\/\/ \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\u4e3aJSON\u683c\u5f0f<\/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.<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\r\n<span class=\"hljs-comment\">\/\/ \u5c01\u88c5POST\u8bf7\u6c42\u65b9\u6cd5<\/span>\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">post<\/span>(<span class=\"hljs-params\">url, data<\/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.<span class=\"hljs-title function_\">post<\/span>(url, data)\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 the example above, an axios instance was created with a base URL, timeout, and request headers set. GET and POST request methods were then wrapped using instance.get and instance.post to send the requests. This way, you can directly call the get and post methods in your project to send requests, and receive results or error messages through Promise&#8217;s resolve and reject upon success or failure.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>One way to encapsulate request interfaces using axios is by creating an axios instance and using that instance to send requests. Here is an example of how to encapsulate a request interface using axios. import axios from &#8216;axios&#8217;; \/\/ \u521b\u5efaaxios\u5b9e\u4f8b const instance = axios.create({ baseURL: &#8216;https:\/\/api.example.com&#8217;, \/\/ \u8bf7\u6c42\u7684\u57fa\u7840URL timeout: 5000, \/\/ \u8bf7\u6c42\u8d85\u65f6\u65f6\u95f4 headers: { &#8216;Content-Type&#8217;: [&hellip;]<\/p>\n","protected":false},"author":10,"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-18085","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 request interfaces in 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-request-interfaces-in-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 request interfaces in axios?\" \/>\n<meta property=\"og:description\" content=\"One way to encapsulate request interfaces using axios is by creating an axios instance and using that instance to send requests. Here is an example of how to encapsulate a request interface using axios. import axios from &#039;axios&#039;; \/\/ \u521b\u5efaaxios\u5b9e\u4f8b const instance = axios.create({ baseURL: &#039;https:\/\/api.example.com&#039;, \/\/ \u8bf7\u6c42\u7684\u57fa\u7840URL timeout: 5000, \/\/ \u8bf7\u6c42\u8d85\u65f6\u65f6\u95f4 headers: { &#039;Content-Type&#039;: [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-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-15T16:13:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T12:27:51+00:00\" \/>\n<meta name=\"author\" content=\"Jackson Davis\" \/>\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=\"Jackson Davis\" \/>\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-request-interfaces-in-axios\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/\"},\"author\":{\"name\":\"Jackson Davis\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\"},\"headline\":\"What is the method for encapsulating request interfaces in axios?\",\"datePublished\":\"2024-03-15T16:13:19+00:00\",\"dateModified\":\"2024-03-21T12:27:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/\"},\"wordCount\":113,\"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-request-interfaces-in-axios\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/\",\"name\":\"What is the method for encapsulating request interfaces in axios? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T16:13:19+00:00\",\"dateModified\":\"2024-03-21T12:27:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-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 request interfaces in 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\/55a10b8b0457c35884c25677889ad350\",\"name\":\"Jackson Davis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"caption\":\"Jackson Davis\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is the method for encapsulating request interfaces in 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-request-interfaces-in-axios\/","og_locale":"en_US","og_type":"article","og_title":"What is the method for encapsulating request interfaces in axios?","og_description":"One way to encapsulate request interfaces using axios is by creating an axios instance and using that instance to send requests. Here is an example of how to encapsulate a request interface using axios. import axios from 'axios'; \/\/ \u521b\u5efaaxios\u5b9e\u4f8b const instance = axios.create({ baseURL: 'https:\/\/api.example.com', \/\/ \u8bf7\u6c42\u7684\u57fa\u7840URL timeout: 5000, \/\/ \u8bf7\u6c42\u8d85\u65f6\u65f6\u95f4 headers: { 'Content-Type': [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T16:13:19+00:00","article_modified_time":"2024-03-21T12:27:51+00:00","author":"Jackson Davis","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Jackson Davis","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-request-interfaces-in-axios\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/"},"author":{"name":"Jackson Davis","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350"},"headline":"What is the method for encapsulating request interfaces in axios?","datePublished":"2024-03-15T16:13:19+00:00","dateModified":"2024-03-21T12:27:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/"},"wordCount":113,"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-request-interfaces-in-axios\/","url":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/","name":"What is the method for encapsulating request interfaces in axios? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T16:13:19+00:00","dateModified":"2024-03-21T12:27:51+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-axios\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/what-is-the-method-for-encapsulating-request-interfaces-in-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 request interfaces in 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\/55a10b8b0457c35884c25677889ad350","name":"Jackson Davis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","caption":"Jackson Davis"},"url":"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/18085","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\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=18085"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/18085\/revisions"}],"predecessor-version":[{"id":51740,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/18085\/revisions\/51740"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=18085"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=18085"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=18085"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}