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

一.首先
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>

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

Guess you like