{"id":12297,"date":"2024-03-14T15:32:51","date_gmt":"2024-03-14T15:32:51","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/"},"modified":"2025-08-04T23:50:54","modified_gmt":"2025-08-04T23:50:54","slug":"how-does-uniapp-request-data-from-the-backend-interface","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/","title":{"rendered":"Uniapp Backend Data Request Tutorial"},"content":{"rendered":"<p>You can use the uni.request method to request data from the backend interface in Uniapp.<\/p>\n<p>Firstly, import the uni.request method in the main.js file of the uniapp project.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> { uniRequest } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@\/utils\/request'<\/span>\r\n<span class=\"hljs-title class_\">Vue<\/span>.<span class=\"hljs-property\"><span class=\"hljs-keyword\">prototype<\/span><\/span>.<span class=\"hljs-property\">$uniRequest<\/span> = uniRequest\r\n<\/code><\/pre>\n<p>Next, create a request.js file in the utils folder, and define the uni.request method.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">uniRequest<\/span> = (<span class=\"hljs-params\">url, method = <span class=\"hljs-string\">'GET'<\/span>, data = {}<\/span>) =&gt; {\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    uni.<span class=\"hljs-title function_\">request<\/span>({\r\n      <span class=\"hljs-attr\">url<\/span>: url,\r\n      <span class=\"hljs-attr\">method<\/span>: method,\r\n      <span class=\"hljs-attr\">data<\/span>: data,\r\n      <span class=\"hljs-attr\">header<\/span>: {\r\n        <span class=\"hljs-string\">'content-type'<\/span>: <span class=\"hljs-string\">'application\/json'<\/span>\r\n        <span class=\"hljs-comment\">\/\/ \u8fd9\u91cc\u53ef\u4ee5\u8bbe\u7f6e\u5176\u4ed6header<\/span>\r\n      },\r\n      <span class=\"hljs-attr\">success<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span> {\r\n        <span class=\"hljs-keyword\">if<\/span> (res.<span class=\"hljs-property\">statusCode<\/span> === <span class=\"hljs-number\">200<\/span>) {\r\n          <span class=\"hljs-title function_\">resolve<\/span>(res.<span class=\"hljs-property\">data<\/span>)\r\n        } <span class=\"hljs-keyword\">else<\/span> {\r\n          <span class=\"hljs-title function_\">reject<\/span>(res)\r\n        }\r\n      },\r\n      <span class=\"hljs-attr\">fail<\/span>: <span class=\"hljs-function\"><span class=\"hljs-params\">err<\/span> =&gt;<\/span> {\r\n        <span class=\"hljs-title function_\">reject<\/span>(err)\r\n      }\r\n    })\r\n  })\r\n}\r\n<\/code><\/pre>\n<p>Now you can use the uniRequest method in components to request backend API data. For example, in a component&#8217;s methods, you can use the uniRequest method to fetch data.<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-attr\">methods<\/span>: {\r\n  <span class=\"hljs-title function_\">getData<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n    <span class=\"hljs-variable language_\">this<\/span>.$uniRequest(<span class=\"hljs-string\">'\/api\/data'<\/span>).<span class=\"hljs-title function_\">then<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">res<\/span> =&gt;<\/span> {\r\n      <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(res)\r\n    }).<span class=\"hljs-title function_\">catch<\/span>(<span class=\"hljs-function\"><span class=\"hljs-params\">err<\/span> =&gt;<\/span> {\r\n      <span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(err)\r\n    })\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>This way, you can request backend interface data in Uniapp. According to the requirements of the backend interface, you can set the url, method, and data parameters in the uniRequest method.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can use the uni.request method to request data from the backend interface in Uniapp. Firstly, import the uni.request method in the main.js file of the uniapp project. import { uniRequest } from &#8216;@\/utils\/request&#8217; Vue.prototype.$uniRequest = uniRequest Next, create a request.js file in the utils folder, and define the uni.request method. export const uniRequest = [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[16062,16061,324,269,1873],"class_list":["post-12297","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-api-request","tag-backend-integration","tag-javascript","tag-mobile-development","tag-uniapp"],"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>Uniapp Backend Data Request Tutorial - Blog - Silicon Cloud<\/title>\n<meta name=\"description\" content=\"Learn how to use Uniapp&#039;s uni.request method to fetch data from backend APIs. Step-by-step guide with code examples for seamless integration.\" \/>\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-uniapp-request-data-from-the-backend-interface\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uniapp Backend Data Request Tutorial\" \/>\n<meta property=\"og:description\" content=\"Learn how to use Uniapp&#039;s uni.request method to fetch data from backend APIs. Step-by-step guide with code examples for seamless integration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-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-14T15:32:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-04T23:50:54+00:00\" \/>\n<meta name=\"author\" content=\"Benjamin Taylor\" \/>\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=\"Benjamin Taylor\" \/>\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-uniapp-request-data-from-the-backend-interface\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/\"},\"author\":{\"name\":\"Benjamin Taylor\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9\"},\"headline\":\"Uniapp Backend Data Request Tutorial\",\"datePublished\":\"2024-03-14T15:32:51+00:00\",\"dateModified\":\"2025-08-04T23:50:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/\"},\"wordCount\":113,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"keywords\":[\"API Request\",\"Backend Integration\",\"JavaScript\",\"Mobile development\",\"Uniapp\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/\",\"name\":\"Uniapp Backend Data Request Tutorial - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-14T15:32:51+00:00\",\"dateModified\":\"2025-08-04T23:50:54+00:00\",\"description\":\"Learn how to use Uniapp's uni.request method to fetch data from backend APIs. Step-by-step guide with code examples for seamless integration.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Uniapp Backend Data Request Tutorial\"}]},{\"@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\/ac801fe9549a25960ce48aa2e0a691c9\",\"name\":\"Benjamin Taylor\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g\",\"caption\":\"Benjamin Taylor\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Uniapp Backend Data Request Tutorial - Blog - Silicon Cloud","description":"Learn how to use Uniapp's uni.request method to fetch data from backend APIs. Step-by-step guide with code examples for seamless integration.","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-uniapp-request-data-from-the-backend-interface\/","og_locale":"en_US","og_type":"article","og_title":"Uniapp Backend Data Request Tutorial","og_description":"Learn how to use Uniapp's uni.request method to fetch data from backend APIs. Step-by-step guide with code examples for seamless integration.","og_url":"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-14T15:32:51+00:00","article_modified_time":"2025-08-04T23:50:54+00:00","author":"Benjamin Taylor","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Benjamin Taylor","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/"},"author":{"name":"Benjamin Taylor","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/ac801fe9549a25960ce48aa2e0a691c9"},"headline":"Uniapp Backend Data Request Tutorial","datePublished":"2024-03-14T15:32:51+00:00","dateModified":"2025-08-04T23:50:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/"},"wordCount":113,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"keywords":["API Request","Backend Integration","JavaScript","Mobile development","Uniapp"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/","url":"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/","name":"Uniapp Backend Data Request Tutorial - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-14T15:32:51+00:00","dateModified":"2025-08-04T23:50:54+00:00","description":"Learn how to use Uniapp's uni.request method to fetch data from backend APIs. Step-by-step guide with code examples for seamless integration.","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-does-uniapp-request-data-from-the-backend-interface\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Uniapp Backend Data Request Tutorial"}]},{"@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\/ac801fe9549a25960ce48aa2e0a691c9","name":"Benjamin Taylor","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ec2e3d3e2d525fd148047c4520ae7c1cdccd1f4b48a1a488422b31f04f345c14?s=96&d=mm&r=g","caption":"Benjamin Taylor"},"url":"https:\/\/www.silicloud.com\/blog\/author\/benjamintaylor\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/12297","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\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=12297"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/12297\/revisions"}],"predecessor-version":[{"id":156089,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/12297\/revisions\/156089"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=12297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=12297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=12297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}