uniapp Request请求封装的方法

封装方法一

1.新建request.js

封装

const baseUrl = "http://localhost:6645"
const request = (url = '', date = {}, type = 'POST', header = {
	'content-type': 'application/x-www-form-urlencoded'
}) => {
	return new Promise((resolve, reject) => {
		uni.request({
			method: type,
			url: baseUrl + url,
			data: date,
			header: header,
			dataType: 'json',
		}).then((response) => {
			setTimeout(function() {
				uni.hideLoading();
			}, 200);
			let [error, res] = response;
			resolve(res.data);
		}).catch(error => {
			let [err, res] = error;
			reject(err)
		})
	});
}
export default request

2.在main.js中全局注册

import request from "api/request.js"
Vue.prototype.$request = request

 3.在页面中调用

	this.$request('/recruit/getAll', {
			// 传参参数名：参数值,如果没有，就不需要传
			}).then(res => {
			// 打印调用成功回调
			console.log(res)
			})

4.效果如下

 优缺点

 优点：方便快捷，效率高

缺点：请求方法没有完全封装，还是散落在页面各处，后期维护不方便

 封装方法二

1.新建请求文件

 

const baseUrl = "http://localhost:6645"

// 获取所有招聘信息
export function getAllRecruit() {
	return uni.request({
	    url: baseUrl + '/recruit/getAll', //仅为示例，并非真实接口地址。
		method: 'POST',
	    header: {
	        'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
	    }
	   
	});

}

2.在页面中导入

	import {getAllRecruit} from "../../api/recruit_info.js"

3，在created周期函数中调用

created() {
			
			
			// 获取所有招聘信息
			getAllRecruit().then(res =>{
				console.log(res)
			})
}

4.效果图

 优缺点

优点：请求方法封装在单独的文件夹中，页面中只需要调用，不需要其他的业务代码，便于维护

缺点：需要导入，导出，代码比方法一多一些