---

一、今日实战目标

• uniapp网络请求封装

---

二、实战步骤

1.新建request.js文件

// 设置api地址
const baseUrl = 'https://center.xxx.com/center/graphql' 

// url:地址  date：数据
// type：method的类型，默认是post
// header：请求头参数
const request = (url = '', date = {}, type = 'POST', header = {
}) => {
    return new Promise((resolve, reject) => {
        uni.request({
            method: type,
            url: baseUrl + url,
            data: date,
            header: {
				"Authorization": uni.getStorageSync('userInfo').token || ''
			},
            dataType: 'json',         
        }).then((response) => {
            setTimeout(function() {
                uni.hideLoading();
            }, 200);
            let [error, res] = response;        
            resolve(res.data);
        }).catch(error => {
            let [err, res] = error;
			uni.hideLoading();
            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
25
26
27
28
29
30
31
32

2. 按需求增加更多的处理（有请求结果提示）

• 成功返回用resolve(),错误返回用reject()

 return new Promise((resolve, reject) => {
 			uni.request({
			method: type,
            url: baseUrl + url,
            data: date,
            header: {
				"Authorization": uni.getStorageSync('userInfo').token || ''
			},
            dataType: 'json', 
			success: res => {
				console.log(res)
				if (res.statusCode == 403) {
					uni.showToast({
						title: '拒绝访问',
						icon: 'none'
					});
					return reject()
				}

//...其他错误提醒一样处理

				//成功的处理函数 这边的code表示请求结果

				switch (res.data.code) {
					case 1:
						//成功
						if (res.data.message) {
							uni.showToast({
								title: res.data.message,
								icon: 'success'
							})
						}
						uni.hideLoading()
						return resolve(res.data.data)
						break

					case 0:

						// 失败
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						uni.hideLoading()
						return reject()
						break

					case 401:

						// 未授权或者过期 跳转到提醒页面
						uni.navigateTo({
							url: '/pages/index/index',
						})
						uni.hideLoading()
						return reject()
						break

						// 其他的code
					default:
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
						uni.hideLoading()
						return reject()
						break
				}

			},

			fail: parmas => {
				console.log(parmas)
				uni.hideLoading()
				switch (parmas.code) {
					case 401:
						uni.clearStorageSync()
						break

					default:
						uni.showToast({
							title: '网络不给力~',
							icon: 'none'
						})
						return reject(parmas)
						break
				}
			}
		})

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

3. 在项目中使用

• 打开根目录的main.js 文件，按下面的图片配置进行全局挂载，就可以在任一页面使用封装的request

• 在需要用到的地方直接按下面的示例来使用

// 示例微信请求登录
let date = {
	variables: {
			code: this.code,
			date: arr.encryptedData,
			iv: arr.iv
	}
}

this.$request('', date).then(res => {

					// 打印调用成功回调,res就是整个请求返回
					console.log(res)
					
					var list = res.data.wxLogin
	
					let pram = {
						nickname: list.nickname,
						token: list.token,
						userid: list.uid,
						headImg: list.headimgurl
					}
					this.$store.commit("login", pram)
					// 提示
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					})
					// 延时跳转页面
					setTimeout(function() {
						uni.switchTab({
							url: '../index/index'
						})
					}, 1500);
				})
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

• 返回的结果如下，我们就可以根据这些来进行下一步的操作。
  

---

小提示

上面有讲到一个全局挂载方法，注意下面：

• Vue 2.0 版本是使用 Vue.prototype.方法名 = 方法名 进行全局挂载，然后用 this.方法名进行调用。

 // 在main.js中先引入
import request from 'common/request.js'  
 // 全局挂载
Vue.prototype.$request = request     


// 使用方法
this.$request('', date).then(res => {
	......
})
1
2
3
4
5
6
7
8
9
10

• Vue 3.0则使用 app.config.globalProperties.$方法名= 方法名 进行挂载。