uniapp请求封装入门级实战记录

     简单记录一下uniapp请求进行封装的相关内容,方便以后查看!
     1.目录结构
     2.封装文件
     2.1 全局公共方法封装
     2.2 请求方法封装
     2.3 项目请求路径封装
     2.4 常用变量封装
     2.5 页面使用

1.目录结构

    项目根目录下创建common文件夹,包含内容:
        全局公共方法封装 commonMethod.js
        请求方法封装 packageMethod.js
        项目请求路径封装 httpApi.js
        常用变量封装 config.js
    不清楚文件内容的可以继续往下看.

2.1 全局公共方法封装

    这里主要是封装一下常用的方法

/**
 * 页面跳转
 * @author txm
 * 
 * @param {String} url 需要跳转的页面的路径
 */
const goTo = (url) => {
	uni.navigateTo({
		url:url
		})
}

/**
 * index页面跳转
 * @author txm
 * 
 * @param {String} url 需要跳转的index页面的路径
 */
const goToIndex = (url) => {
	uni.switchTab({
		url,
		success: function (res) {
			console.log(res)
		},
		fail: function (e) {
			console.log(e)
		}
	})
}
/**
 * 消息弹窗
 * @author txm
 * 
 * @param {String} title 标题
 * @param {Number} duration 窗口动画持续时间，单位为 ms
 * @param {String} icon 
 */
const showMsg=(title,icon='none',duration=1500)=>{
	uni.showToast({
	    title,
	    duration,
			icon
	});
}
/**
 * 显示加载中
 * @author txm
 * 
 */
const showLoading=()=>{
	uni.showLoading({
			title: '加载中',
			mask: true
		})
}
/**
 * 取消加载中
 * @author txm
 * 
 */
const hideLoading=()=>{
	uni.hideLoading();
}


//注册定义的方法
export const commonMethod={
	goTo,
	goToIndex,
	showMsg,
	showLoading,
	hideLoading
}

    main.js中注册全局公共方法

// 全局自定义方法  Vue.prototype:使用范围是每个vue实例中可用
import {commonMethod} from './common/commonMethod.js'
Vue.prototype.$commonMethod=commonMethod

2.2 请求方法封装

    这里是对常用的rest请求进行封装

import {commonMethod} from '@/common/commonMethod.js'
import config from '@/common/config.js'
// 服务器路径
const serverUrl = config.serverUrl; 
// 用户token
const token = uni.getStorageSync('token');

// post请求封装
function postRequest(url, data, header) {
	var promise = new Promise((resolve, reject) => {
		console.log('resolve,reject:this',this)
		console.log('commonMethod:',commonMethod)
		// 显示加载中
		commonMethod.showLoading()
		uni.request({
			url: serverUrl + url,
			data: data,
			method: 'POST',
			timeout: 100000,
			header: {
				'content-type': header || 'application/json',
				'token': token,
			},
			success: function(res){ 
				console.log('success:res',JSON.stringify(res))
				commonMethod.hideLoading();
				if (res.data.code == 200) {
					 resolve(res.data.data);
				}else{  // 非正常接口返回按照回调失败处理,方法中使用catch进行捕获显示到页面
					reject(res.data);
				}
			},
			fail: function(e) {
				console.log('fail:e',JSON.stringify(e))
				commonMethod.hideLoading(); 
				reject('网络错误');
			}
		})
	});
	return promise;
}

// get请求封装
function getRequest(url, data) {
	var promise = new Promise((resolve, reject) =>{
		// 显示加载中
		commonMethod.showLoading()
		uni.request({
			url: serverUrl + url,
			data: data,
			method: 'GET',
			timeout: 100000,
			header: {
				'content-type': 'application/json',
				'token': token
			},
			success: function(res){ 
				commonMethod.hideLoading();
				if (res.data.code == 200) {
					 resolve(res.data.data);
				}else{  // 非正常接口返回按照回调失败处理,方法中使用catch进行捕获显示到页面
					reject(res.data);
				}
			},
			fail: function(e) {
				console.log('fail:e',JSON.stringify(e))
				commonMethod.hideLoading(); 
				reject('网络错误');
			}
		})
	});
	return promise;
}

//put请求封装
function putRequest(url,data,header){
	var promise = new Promise((resolve,reject) => {
			// 显示加载中
			commonMethod.showLoading()
			uni.request({
				url:serverUrl + url,
				data:data,
				method:"PUT",
				header:{
					'content-type': header || 'application/json',
					'token': token,
					},
				success:function(res){
					commonMethod.hideLoading();
					if (res.data.code == 200) {
						 resolve(res.data.data);
					}else{  // 非正常接口返回按照回调失败处理,方法中使用catch进行捕获显示到页面
						reject(res.data);
					}
				},
				fail:function(e){
					console.log('fail:e',JSON.stringify(e))
					commonMethod.hideLoading(); 
					reject('网络错误');
				}
			});
	});
	return promise;
}
//del请求封装
function delRequest(url,data){
	var promise = new Promise((resolve,reject) => {
			// 显示加载中
			commonMethod.showLoading()
			uni.request({
				url:commoneUrl + url,
				data:data,
				method:"DELETE",
				header:{
					'content-type': header || 'application/json',
					'token': token,
					},
				success:function(res){
					commonMethod.hideLoading();
					if (res.data.code == 200) {
						 resolve(res.data.data);
					}else{  // 非正常接口返回按照回调失败处理,方法中使用catch进行捕获显示到页面
						reject(res.data);
					}
				},
				fail:function(e){
					console.log('fail:e',JSON.stringify(e))
					commonMethod.hideLoading(); 
					reject('网络错误');
				}
			});
	});
	return promise;
}


module.exports = {
	postRequest,
	getRequest,
	putRequest,
	delRequest
}

2.3 项目请求路径封装

    这里对服务端的请求路径进行封装

var packageMethod = require('./packageMethod.js'); 

// 绑定用户公众号openid post表单传参
export function apiA(data) {
  return packageMethod.postRequest("/user/apiA", data,"application/x-www-form-urlencoded");
}

// 测试:post请求体传参
export function apiB(data) {
  return packageMethod.postRequest("/user/apiB", data);
}

// 测试:get请求体传参
export function apiC(data) {
  return packageMethod.getRequest("/user/apiC", data);
}

2.4 常用变量封装

    这是对常用的变量进行封装

 export default{
   serverUrl:"https://127.0.0.1:8081",
   notifyUrl:'http://fjj4qd.natappfree.cc/demo1/#/pages/notice/notice',
  }

2.5 页面使用

    方法使用举例,简单列一下常用的post表单传参、post请求体传参、get请求。

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	import configInfo from '@/common/config.js'
	import {
		apiA,apiB,apiC
	} from '../../common/httpApi.js';
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
		},
		methods: {
			serverApiC(){
				apiC({
					'a': "123",
					'b': 5
				}).then(response => {
					console.log("response",response)
				}).catch((data) => {
					this.$commonMethod.showMsg(JSON.stringify(data.msg))
				})
			},
			serverApiB(){
				apiB({
					'userId': "123",
					'contentText': "5",
					'contentImg': "8",
				}).then(response => {
					console.log("response",response)
				}).catch((data) => {
					this.$commonMethod.showMsg(JSON.stringify(data.msg))
				})
			},
			serverApiA(){
				apiA({
					'gzhCode': "123"
				}).then(response => {
					console.log("response",response)
				}).catch((data) => {
					this.$commonMethod.showMsg(JSON.stringify(data.msg))
				})
			}
		}
	}
</script>

<style>
</style>

    以上是对uniapp请求的封装记录过程,如果感觉有帮助欢迎点赞收藏!
    最近参与了一个匿名社交的小程序,感兴趣的可以看一下!