uniapp封装请求_uniapp请求封装

一、安装依赖包

npm i @escook/request-miniprogram --save
1

二、封装请求文件

平常vue用的很多，所以基本被vue开发思维固化了

1、建立utils文件夹，并建立request.js文件

// 导入发请求的包,并挂载到uni身上
import {
	$http
} from '@escook/request-miniprogram';
//全局挂载在uniapp
uni.$http = $http;
//请求路径
$http.baseUrl = 'http://192.168.2.23:8252/';
//请求拦截器
$http.beforeRequest = function(config) {
	//携带token
	$http.header["token"] = uni.getStorageSync("token") ? uni.getStorageSync("token") : '';
}
//响应拦截器
$http.afterRequest = function(response) {
	const code = response.data.code;
	switch (code) {
		case 0:
			break;
		case -1:
			uni.showToast({
				title: response.data.msg,
				duration: 2000,
				icon: "none"
			});
			uni.navigateTo({
				url: '../login/login'
			});
			break;
		case 10000:
			uni.showToast({
				title: response.data.msg,
				duration: 2000,
				icon: "none"
			});
			break;
		default:
			uni.showToast({
				title: response.data.msg,
				duration: 2000,
				icon: "none"
			});
			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

2、main.js引入

import "./utils/request.js"
1

3、api封装

//api.js文件中
// post请求
export function 函数名 (params,callback){
	uni.$http.post("接口路径",params).then((res)=>{
		callback(res);
	});
}
//get请求
export function 函数名 (params,callback){
	uni.$http.get("接口路径",params).then((res)=>{
		callback(res);
	});
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4、页面中使用

import {函数名} from "@/api/api.js"
export default {
	********
	methods: {
	const params = {
		"bsPhone": "13000000000"
	}
	uni.setStorageSync("token",'2')
	send_code(params,(res)=>{
		console.log(res);
		});
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13

–基本结束–