Front-end: Uniapp encapsulation network request notes

[[425641]]

As a front-end framework for mobile development, uniapp is very popular in China. Using HbuilderX development tools, systems developed based on the uniapp framework can be easily converted into small programs, apps and other mobile programs, greatly reducing the cost of mobile development. Network requests are a necessary technology for every front-end project, so it is necessary to encapsulate front-end network requests. Today, I will introduce to you how to implement simple encapsulation of network requests based on uniapp. I hope it will be helpful to novices!

1. First install the HbuilderX development tool to create a uniapp project.

2. Create config, js, and request.js files in the common directory

 const BASE_URL = "https://qqlykm.cn/api/yan/gc.php" ; // Randomly query ancient poetry interface

request.js

 import {GlobeConfig} from   'config.js'  
 export const request = (options)=>{
 return new Promise((resolve, reject)=>{
 // Encapsulation body: network request
 uni.request({
            url: "/api" +options.url,
            data: options.data || {},
 // The default value is GET. If you need to change it, set other method values ​​in options.
            method: options.method || 'GET' ,
            success: (res) => {
 console.log(res.data); // The console displays data information
 resolve(res)
 },
 fail: (err) =>{
 // The pop-up box on the page failed to display
                uni.showToast({
 Title: 'Request interface failed'  
 })
 // Return error message
 reject(err)
 },
 catch:(e)=>{
                console.log(e);
 }
 })
 }
 )
 }
 // https://qqlykm.cn/api/yan/gc.php test interface
 { "code" : "200" , "msg" : "success" ,
 "data" :
 { "Poetry" : "The yes of a thousand people is not as good as the outspokenness of one scholar." ,
 "Poet" : "null" ,
 "Poem_title" : "Records of the Grand Historian: Biography of Shang Yang" }
 }

3. main.js imports the encapsulated network request

 //Import the encapsulated network request
 import {request} from   'common/request.js'  
 Vue.prototype.$request = request

4. Create a new test demo.vue

 <template>
 < view class= "content" >
        < view class= "article-meta" >
          <text class= "" >{{Poem_title}}</text>
 </ view >
 < view >
 <text class= "" >Author: {{Poet}}</text>
 </ view >
        < view class= "article-content" >
          < view >{{Poetry}}</ view >
 </ view >
 </ view > 
 
 </template> 
 
 <script>
 export default {
 data() {
 return {
                Poem_title: "" ,
 Poet: "" ,
 Poetry: ""  
 }
 },
 onLoad() {
 this.initData();
 }, 
 
 methods: {
            async initData() {
 debugger;
                const res = await this.$request({
 url: '' , //The requested url can be written in the configuration file by default
 data: {
 //Interface request parameters, may be empty
 }
 })
 // Assign data to the page
                if (res.data.msg == "success" ) {
                    this.Poem_title = res.data.data.Poem_title;
                    this.Poet = res.data.data.Poet== "null" ? "Anonymous" : res.data.data.Poet;
                    this.Poetry = res.data.data.Poetry;
 } 
 
 }
 }
 }
 </script> 
 
 <style lang= "scss" scoped>
 </style>

Run Page

Personal blog website: https://programmerblog.xyz

This article is reprinted from the WeChat public account "IT Technology Sharing Community", which can be followed through the following QR code. To reprint this article, please contact the IT Technology Sharing Community public account.