uniapp封装请求方法_uniapp请求封装

uni.request

注：在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

封装请求方法

1. 新建api文件夹，统一管理接口相关内容
   
   在文件.env.devlopment 和 .env.production 中设置 VUE_APP_BASE_URL=“/pdafbl”
   

2. 封装请求方法
   同步请求

// 设置公共路径
const baseUrl = process.env.VUE_APP_BASE_URL;

const request = (url, method, data, callback, hideLoading) => {
	const headers = {
		'content-type': 'application/json',
		'x-requested-with': 'XMLHttpRequest'
	};
	
	// 如果调用接口不明确不显示 loading
	if (!hideLoading) {
		uni.showLoading({
			title: '加载中'
		});
	}

	uni.request({
		url: (url.substr(0, 4) == 'http') ? url : (baseUrl + url),
		data: data,
		header: headers,
		method: method,
		success: (response) => {
			if (!hideLoading) {
				uni.hideLoading();
			}

			const result = response.data;

			if (response.statusCode == 200) {
				const head = response.header;
				if (head.is_login === '0' && head.redirect_url) {
					if (process.env.NODE_ENV === 'production')
						window.location.href = head.redirect_url;
				} else if (head.is_granted === '0') {
					uni.showToast({
						icon: "none",
						title: "暂无权限，请先开通权限"
					})
				} else {
					callback(result)
				}
			} else {
				showError(response)
			}

		},
		complete: () => {
			if (!hideLoading) {
				uni.hideLoading();
			}
		},
		fail: () => {
			if (!hideLoading) {
				uni.hideLoading();
			}
			uni.showToast({
				title: "请求失败，请重试",
				icon: 'none',
				duration: 1500
			});
		}
	})
}
const showError = error => {
	let errorMsg = ''
	switch (error.statusCode) {
		case 400:
			errorMsg = '请求参数错误'
			break
		case 401:
			errorMsg = '未授权，请登录'
			break
		case 403:
			errorMsg = '跨域拒绝访问'
			break
		case 404:
			errorMsg = '请求地址出错'
			break
		case 408:
			errorMsg = '请求超时'
			break
		case 500:
			errorMsg = '服务器内部错误'
			break
		case 501:
			errorMsg = '服务未实现'
			break
		case 502:
			errorMsg = '网关错误'
			break
		case 503:
			errorMsg = '服务不可用'
			break
		case 504:
			errorMsg = '网关超时'
			break
		case 505:
			errorMsg = 'HTTP版本不受支持'
			break
		default:
			errorMsg = error.msg
			break
	}

	uni.showToast({
		title: errorMsg,
		icon: 'none',
		duration: 2000,
		complete: function() {
			setTimeout(function() {
				uni.hideToast();
			}, 1000);
		}
	});
}
export default request;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

异步请求

const baseUrl = process.env.VUE_APP_BASE_URL;
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

接口统一管理

新建 api.js 文件，统一管理所有接口信息

import request from "./request.js"

export const login =(data, callback, hideLoading) => request(url, method, data, callback,
	false);

1
2
3
4
5

调用方式

在页面中导入需要的接口

	import { login } from "../../api/api.js"

methods：{
		login(){
			login().then(res=>{
				console.log(res);
			}).catch(error=>{
				console.log(error);
			})
		}
}

1
2
3
4
5
6
7
8
9
10
11
12

优缺点

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