uniapp中使用类封装请求~_uni-app中如何封装请求

最近学习uniapp，将网络请求封装知识点进行记录。

---

前言

uniapp框架自带了请求方式，但是在项目中，我们依然需要进行二次的封装，这样才能更方便的进行管理和使用。写这一篇文章为了学习记录，有不足之处还请谅解和指出，我会进行改进，互相进步。下面让我们一步步来完成封装~

一、目录规划

service文件夹：用来存放封装请求的地方；
request文件夹：用来存放具体编写请求文件的地方；
index.js ：统一的出口文件，后续使用请求只需要引入这个文件；
config.js ：配置请求基本信息的文件；
request.js ：编写具体请求的文件；

二、搭建基本结构

1.request.js

class XCRequest {}
export default XCRequest
1
2

2.index.js：

import XCRequest from './request/request'
export default new XCRequest()
1
2

这样我们就在request.js中定义了一个类，然后在index.js文件中实例了这个类并导出，后续只需要引用这个实例对象即可。

三、实现请求

1.request.js:

class XCRequest {
  constructor(config) {}
  request(config){
	uni.request({
		...config,
		success: (res) => {
			console.log(res)
		},
		fail(err) {
			console.log('请求错误', err)
		}
	})
  }
}
export default XCRequest
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.config.js:

const baseURL = 'https://api.vvhan.com'		//基本URL地址
const timeout = 1000						//超时时间
export { baseURL, timeout }
1
2
3

3.index.js:

import XCRequest from './request/request.js'
import { baseURL, timeout } from './request/config.js'
const xcRequest = new XCRequest({ baseURL, timeout })
export default xcRequest
1
2
3
4

这里我在类中定义了request函数，在函数中调用uni.request方法发起了请求，然后在config.js中定义基本的请求地址和超时时间，然后在实例化类的时候传入进去，不过我们暂时没在constructor中进行使用，下面我们发起一个请求测试。

4.发起请求测试

import xcRequest from '../../service/index.js'
xcRequest.request({
	url: 'https://api.vvhan.com/api/reping',
	methods: 'get'
})
1
2
3
4
5

很显然，我们的封装成功了，但是这样的封装太简陋了，我们下面进行完善。

四、完善封装

1.添加拦截器

// request.js 文件
class XCRequest {
	constructor(config) {
		//uniapp的拦截器
		uni.addInterceptor('request', {
			//请求触发前的回调函数
			invoke(args) {
				//	agrs就是在调用uni.request时候的传参
				// request 触发前拼接 url 和超时时间
				args.url = config.baseURL + args.url  //将初始化时传入的url和超时时间进行设置
				args.timeout = config.timeout
				//这里可以加入请求加载动画
			},
			//请求成功的回调函数
			success(args) {
				//这里可以将请求加载动画进行关闭
				// 请求成功后，修改code值为1
				// args.data.code = 1
			},
			//拦截失败回调函数
			fail(err) {
				console.log('interceptor-fail', err)
			},
			//拦截完成回调函数
			complete() {}
		})
	}
	request(config) {
		uni.request({
			...config,
			success: (res) => {
			},
			fail(err) {
			}
		})
  }
}
export default XCRequest
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

这样就给请求添加上了拦截器，可以让我们在请求前和请求完成后执行一些操作。下面我们在进行优化，将请求结果返回为一个promise对象。

2. 封装请求返回promise对象

// request.js 文件
class XCRequest {
	constructor(config) {
		//uniapp的拦截器
		uni.addInterceptor('request', {
			//请求触发前的回调函数
			invoke(args) {
				//	agrs就是在调用uni.request时候的传参
				// request 触发前拼接 url 和超时时间
				args.url = config.baseURL + args.url  //将初始化时传入的url和超时时间进行设置
				args.timeout = config.timeout
				//这里可以加入请求加载动画
			},
			//请求成功的回调函数
			success(args) {
				//这里可以将请求加载动画进行关闭
				// 请求成功后，修改code值为1
				// args.data.code = 1
			},
			//拦截失败回调函数
			fail(err) {
				console.log('interceptor-fail', err)
			},
			//拦截完成回调函数
			complete() {}
		})
	}
	request(config) {
		//返回promise对象
		return new Promise((resolve, reject) => {
			uni.request({
				...config,
				success: (res) => {
					resolve(res.data)
				},
				fail(err) {
					reject(err)
				}
			})
		})
  }
}
export default XCRequest
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

这样就可以在我们调用request方法后得到一个包含请求数据的promise对象了，下面我们在进行最后一个完善，细分不同的请求类型。

3. 封装不同请求类型

// request.js 文件
class XCRequest {
	constructor(config) {
		//uniapp的拦截器
		uni.addInterceptor('request', {
			//请求触发前的回调函数
			invoke(args) {
				//	agrs就是在调用uni.request时候的传参
				// request 触发前拼接 url 和超时时间
				args.url = config.baseURL + args.url  //将初始化时传入的url和超时时间进行设置
				args.timeout = config.timeout
				//这里可以加入请求加载动画
			},
			//请求成功的回调函数
			success(args) {
				//这里可以将请求加载动画进行关闭
				// 请求成功后，修改code值为1
				// args.data.code = 1
			},
			//拦截失败回调函数
			fail(err) {
				console.log('interceptor-fail', err)
			},
			//拦截完成回调函数
			complete() {}
		})
	}
	request(config) {
		//返回promise对象
		return new Promise((resolve, reject) => {
			uni.request({
				...config,
				success: (res) => {
					resolve(res.data)
				},
				fail(err) {
					reject(err)
				}
			})
		})
  }
	
	get(config) {
		return this.request({
			...config,
			method: 'get'
		})
	}
	post(config) {
		return this.request({
			...config,
			method: 'post'
		})
	}	
	// 还可以添加更多的请求类型
}
export default XCRequest
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

这样就可以如果是get请求调用get方法即可，post请求调用post方法，更加方便。我们来进行测试一下。

4.测试请求

import xcRequest from '../../service/index.js'
	async created() {
		const res = await xcRequest.get({
			url: '/index.php',
			data: {
				_mall_id: '1',
				r: 'api/home/indexs'
			}
		})
		console.log(res)
	}
1
2
3
4
5
6
7
8
9
10
11

总结

上面我们成功完成了一个在uniapp中比较基本的请求封装，我们还可以对其进行优化，比如在使用的时候将不同的页面的请求封装在函数中，这样页面中直接调用函数，保持页面中的代码整洁。如果文中有错误之处还望谅解，提出来后本人也会积极进行修改。本人在学习完知识点后，通过文章进行记录和总结，希望和大家共同进步。