当前位置：网站首页>Simple encapsulation steps of request data request of uniapp

Simple encapsulation steps of request data request of uniapp

2022-07-27 14:18:00 【A bone preference】

uniapp Of request Simple encapsulation steps for data requests

1. New file 、 newly build api.js
Insert picture description here

// Encapsulation request 
const BASE_URL = 'https://api-hmugo-web.itheima.net/api/public/v1'; // Root address 
export const myRequest = (options)=>{
    
return new Promise((resolve,reject)=>{
    
	uni.request({
    
		url:BASE_URL + options.url,
		method:options.method,
		data:options.data || {
    },
		success: (res) => {
    
				// When getting failed 
				// console.log(res)
				if(res.data.meta.status != 200){
    
				return uni.showToast({
    
						title:' Get data is empty ',
						icon:"error",
						duration:1600,
					})
				}
				// On success 
				resolve(res)
		    },
			fail: (err)=>{
    
				uni.showToast({
    
					title:' Request interface failed '
				})
				reject(err)
				
			}
		
	})
})

	// Request data   Example   Use encapsulation in future pages 
	// myRequest({
    
	// 	url:'',
	// 	method:'POST',
	// 	data:{
    }
	// })
	
}

2. Need to be in main.js File and install
Insert picture description here

import {
    myRequest} from '@/until/api.js'

// install 
Vue.prototype.$myRequest = myRequest

3. Call encapsulation in the page **（ stay onload To load the requested data ）**
Insert picture description here

	// Load data before request 
		onLoad() {
    
          this.getSwipers()
		},
		methods: {
    
			async getSwipers(){
    
			 const res = await this.$myRequest({
    
					url:'/home/swiperdata'
				})
				console.log(res.data.message)
				this.swipers = res.data.message // Transfer the obtained data into data in 
			}
		}
	}