22.uniapp封装$myRequest方法并挂载全局

我不是女神ヾ 2023-01-14 01:57 226阅读 0赞

**一.首先**  
*api.js 里面写需要封装的接口*

const BASEE_URL = 'http://localhost:8082'
    
    // 封装发送请求
    export const myRequest = (options) => {			//	options 传过来的是下面的值 
    	// 异步请求一般用于Promise
    	return new Promise((resolve,reject) => {		
    		uni.request({
    			// http://localhost:8082/api/getlunbo		一般分为两个部份 http://localhost:8082/	后期换地址方便	在上面封装一下;	另一部分/api/getlunbo在下面后期封装也可以直接调用			
    			url:BASEE_URL + options.url,
    			methods: option.methods || {},		// 默认是空对象{}
    			success(res) {
    				// console.log(res);
    				if(res.data.status !== 0){		// 意思打印请求数据看到的	res.data.status
    					return uni.showToast({
    						title:"获取数据失败",
    					})
    				}
    				// 成功会的	调用
    				resolve(res)
    			},
    			fail(err) {
    				uni.showToast({
    					title:"请求接口失败",
    				})
    				// 调用失败时候
    				reject(err)
    			}
    		})
    	})
    }
    
    myRequest({
    	url:'/api/getlunbo',
    	methods:'POST',
    	data:{}
    })

**二.把api.js 封装好的 挂载在 main.js 里面**

import Vue from 'vue'
    import App from './App'
    
    // 挂载util里面的api封装的接口		如果想全局使用就挂载原型上		下面
    import { myRequest } from './util/api.js'
    // 挂载全局接口	全局可以调用
    Vue.prototype.$myRequest = myRequest
    
    
    Vue.config.productionTip = false
    
    App.mpType = 'app'
    
    const app = new Vue({
        ...App
    })
    app.$mount()

**三.使用 在index.vue中使用**

<template>
    	<view>
    		轮播图界面
    	</view>
    </template>
    
    <script>
    	export default {
    		data(){
    			return{
    				swipers:[]
    			}
    		},
    		methods:{
    			// 获取轮播图的数据
    			// 调用全局封装接口	直接调用可以使用
    			async getSwipers() {
    				const res = await this.$myRequest({
    					url:'/api/getlunbo'
    				})
    				this.swipers = res.data.message
    			}
    		}
    	}
    </script>
    
    <style>
    </style>