uniapp项目搭建 请求配置

每个人项目用的请求接口不一样,这里就看下实现思路就好了

请求配置

在 uniapp 当中有封装好的 request 插件, request插件地址
在项目的 utils/request/index.js 中是对请求的配置

utils/request/index.js代码

/**
 * request插件地址：https://ext.dcloud.net.cn/plugin?id=822
 */
import store from '@/store'
import request from './request'
import Config from '@/core/config'

// 后端api地址
const apiUrl = Config.get('apiUrl')

// 可以new多个request来支持多个域名请求
const $http = new request({
	// 接口请求地址
	baseUrl: apiUrl,
	// 服务器本地上传文件地址
	fileUrl: apiUrl,
	// 服务器上传图片默认url
	defaultUploadUrl: 'upload/image',
	// 设置请求头（如果使用报错跨域问题，可能是content-type请求类型和后台那边设置的不一致）
	header: {
		'content-type': 'application/json;charset=utf-8'
	},
	// 请求超时时间, 单位ms（默认15000）
	timeout: 15000,
	// 默认配置（可不写）
	config: {
		// 是否自动提示错误
		isPrompt: true,
		// 是否显示加载动画
		load: true,
		// 是否使用数据工厂
		isFactory: true
	}
})

// 当前接口请求数
let requestNum = 0
// 请求开始拦截器
$http.requestStart = options => {
	if (options.load) {
		if (requestNum <= 0) {
			// 打开加载动画
			uni.showLoading({
				title: '加载中',
				mask: true
			})
		}
		requestNum += 1
	}
	// 图片上传大小限制
	if (options.method == "FILE" && options.maxSize) {
		// 文件最大字节: options.maxSize 可以在调用方法的时候加入参数
		const maxSize = options.maxSize
		for (let item of options.files) {
			if (item.size > maxSize) {
				setTimeout(() => {
					uni.showToast({
						title: "图片过大，请重新上传",
						icon: "none"
					})
				}, 10)
				return false
			}
		}
	}
	// 请求前加入当前终端
	options.header['platform'] = store.getters.platform
	//todo 后期需增加多语言
	options.header['Accept-Language'] = "zh-CN,zh;q=0.9"
	// 请求前加入Token
	options.header['Authorization'] = 'Bearer ' + store.getters.token

	if (options.ignoreToken && (options.ignoreToken == true || options.ignoreToken == "true")) {
		delete options.header['Authorization'];
	} else {
		//判断token是否为空，为空则不会继续请求
		if (store.getters.token === undefined || store.getters.token === '' || store.getters.token === null) {
			return false
		}
	}

	return options
}

// 请求结束
$http.requestEnd = options => {
	// 判断当前接口是否需要加载动画
	if (options.load) {
		requestNum = requestNum - 1
		if (requestNum <= 0) {
			uni.hideLoading()
		}
	}
}

let showLogin = 0

// 所有接口数据处理（可在接口里设置不调用此方法）
// 此方法需要开发者根据各自的接口返回类型修改，以下只是模板
$http.dataFactory = async res => {
	let httpData = res.response.data
	let statusCode = res.response.statusCode // 这里拿一下响应的状态码

	if (typeof httpData == "string") {
		try {
			httpData = JSON.parse(httpData)
		} catch {
			httpData = false
		}
	}
	if (httpData === false || typeof httpData !== 'object') {
		// 返回错误的结果(catch接受数据)
		console.log(res)
		return Promise.reject({
			statusCode: res.response.statusCode,
			errMsg: "数据工厂验证不通过"
		})
	}

	/*********以下只是模板(及共参考)，需要开发者根据各自的接口返回类型修改*********/

	// 判断数据是否请求成功
	// result.status [ 200正常 500有错误 401未登录 403没有权限访问 ]
	// statusCode
	if (statusCode == 200) {
		// 返回正确的结果(then接受数据)
		return Promise.resolve(httpData)
	}
	let message = 'http状态码错误';
	let code = undefined;
	if (statusCode === 400) {
		if (res.response.data) {
			message = res.response.data.message || message;
			code = res.response.data.code || code;
		}
	} else if (statusCode === 504) {
		message = '服务器错误';
	} else if (statusCode === 403) {
		if (res.response.data) {
			message = res.response.data.message || message;
		}
	} else if (statusCode === 404) {

	} else if (statusCode == 401) {
		// 401也有可能是后端登录态到期, 所以要清空本地的登录状态
		if (showLogin === 1) {
			//如果已经提示登录了，则不再重复提示
		} else {
			showLogin = 1
			store.dispatch('Clear')
			// 超时未操作就弹窗提醒是在这里执行的
			// 弹窗告诉用户去登录
			uni.showModal({
				title: '温馨提示',
				content: '此时此刻需要您登录喔~',
				showCancel: false,
				confirmText: "去登录",
				cancelText: "再逛会",
				success: res => {
					showLogin = 0
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/sys/login/index'
						})
					}
					if (res.cancel && getCurrentPages().length > 1) {
						uni.navigateBack()
					}
				}
			})
		}
	} else if (statusCode == 500) {
		if (res.isPrompt) {
			setTimeout(() => {
				uni.showToast({
					title: httpData.message,
					icon: "none",
					duration: 2500
				}, 10)
			})
		}
		// 返回错误的结果(catch接受数据)
		return Promise.reject({
			statusCode: 0,
			errMsg: httpData.message,
			result: httpData
		})
	} else {
		message = '服务器内部错误';
	}

	return Promise.reject({
		statusCode: res.response.statusCode,
		// errMsg: "数据工厂验证不通过",
		errMsg: message,
		code: code,
	})
	/*********以上只是模板(及共参考)，需要开发者根据各自的接口返回类型修改*********/
}

// 错误回调
$http.requestError = e => {
	if (e.statusCode === 0) {
		throw e
	} else {
		setTimeout(() => showRequestError(e), 10)
	}
}

// 显示请求错误信息
const showRequestError = (e) => {
	let errMsg = `网络请求出错：${e.errMsg}`
	// #ifdef MP-WEIXIN
	if (e.errMsg === 'request:fail url not in domain list') {
		errMsg = '当前API域名未添加到微信小程序授权名单 ' + e.errMsg
	}
	// #endif
	if (e.errMsg === 'request:fail') {
		errMsg = '网络请求错误：请检查api地址能否访问正常'
	}
	uni.showToast({
		title: errMsg,
		icon: "none",
		duration: 3500
	})
}

export default $http

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

分析

几个常用的方法

请求开始拦截器
$http.requestStart 中在请求发起之前做了一些处理,比如 :在请求头中加入 token,以及项目所需的其他请求头参数

请求结束后
$http.requestEnd中执行请求结束后期望的动作

对响应数据的处理,所有接口数据处理（可在接口里设置不调用此方法）
$http.dataFactory

配置文件的引入

在这个文件中引入了 Config.js
调用关系如下

编写接口,并测试调用

1. 写请求接口
   首先请求接口通常是写在项目的 api 的包中的,根据项目中不同模块功能划分,分别创建对应的目录,然后在目录中创建 index.js ,在 index.js 中写请求路径,以及接口相关

示例代码 :

// 引入 request
import request from '@/utils/request'

// api地址
const api = {
  receive: 'user.coupon/receive', // 这里对应的就是后端请求接口的地址
}

// 优惠券列表
export const receive = (data) => {
	// 这里根据请求是 post/get/put/delete 来写,data就是传递的参数
  return request.post(api.receive, data)
}

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

2. 调用请求
   在调用请求的位置,记得先引入,再调用

<script>
	// 这里需要引入接口
	import * as CouponApi from '@/api/user/coupon.js'
	export default {
		data() {
			return {
			}
		},
		methods: {
			// 调用请求测试
			invokeTest() {
				CouponApi.receive({
					// 这里传递参数,根据需要以及接口需要的参数传递
					id: '1001',
					name: 'testName'
				}).then(res => {
					// 这里获取到请求成功后响应的数据,根据业务情况对响应数据进行处理
					console.log(res)
				}).catch(err => {
					// 请求失败获取到的错误信息
					console.log(err)
				})
			}
		}
	}
</script>

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