uniapp之uni.request()封装

第一步：uni.request()封装https.js

module.exports = (param) => {
	var url = param.url;
	var method = param.method;
	var header = param.header || {};
	var data = param.data || {};
	
	// 请求方式: GET POST 
	if(method){
		method = method.toupperCase(); // 小写转成大写
		if(method == "POST"){
			header = {"content-type":"application/x-www-form-urlencoded"}
		}
	}
	
	// 发起请求 加载动画
	if(!param.hideLoading){
		uni.showLoading({title:"加载中..."})
	}
	
	// 发起网络请求
	uni.request({
		url: url,
		method:method || "GET",
		header:header,
		data: data,
		success: res => {
			if(res.statusCode && res.statusCode != 200){ // api错误
				uni.showModal({
					content:res.msg
				})
				return;
			}
			
			typeof param.success == "function" && param.success(res.data);
		},
		fail: (e) => {
			uni.showModal({
				content: e.meg
			})
			typeof param.fail == "function" && param.fail(e.data);
		},
		complete: () => {
			// console.log("网络请求complete");
			uni.hideLoading();
			typeof param.complete == "function" && param.complete(e.data);
			return;
		}
	})
}

第二步：路径配置interface.js

const domain="http://api.bingoha.net/";
const interface={
	//首页数据
	getMallList:domain+"api/profiles/mall_list"
};
//附加到module
module.exports=interface;

第三步：在main.js全局注册

import Vue from 'vue'
import App from './App'

// 1.引入https
import https from "./util/https.js"
import interfaces from "./util/interfaces.js"

Vue.config.productionTip = false

//2. 把https请求附加到Vue全局
Vue.prototype.$Https=https;
Vue.prototype.$Interface=interfaces;

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

第四步：使用封装函数

<template>
	<view>
		
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-Box">
				<!-- 轮播图片 -->
				<swiper circular="true" style="height: 300rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(item,index) in swiperList" >
						<view class="swiper-item">
							<image :src="item.img" mode="" style="width: 100%;height: 300rpx;"></image>
						</view>
					</swiper-item>
				</swiper>
				
			</view>
		</view>		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				swiperList:[]
			}
		},
		onLoad() {
				this.initData();
		},
		methods: {
			initData(){
				 this.$Https({
					url:this.$Interface.getMallList,
					success:((res)=>{
						console.log(res);
						this.swiperList=res.data.swiperList;
					
					})
				}); 
			
			}
		}
	}
</script>

<style>

</style>

第五步：在浏览器运行调试即可。