机遇屋-uniapp使用vue方式封装请求

uniapp使用vue方式封装请求

作者：ych

在开发uni-app项目时，一定会用到网络请求，官方是通过uni.request进行网络请求。在实际的项目开发过程中，如果不对请求进行封装的话，各个页面的网络请求会混乱不堪，出现大量冗余代码、难以维护。

实现思路：

1.在项目根目录创建utils文件夹，新建request.js文件。

2.项目根目录创建api文件夹，不同的业务模块创建不同js文件。

3.在页面引入需要的业务模块。

详细步骤：

1.新建request.js (@/utils/request.js)
```
const url_all = {
	'DEV': `http://192.168.**.***`, // 开发
}
let BASEURL = url_all['DEV']
 
export const request = (options = {}) => {
	return new Promise((resolve, rejects) => {
		handleRequest(options, resolve, rejects)
	})
}
 
// 发起请求
function handleRequest(options, resolve, reject) {
	const token = uni.getStorageSync('token')
	uni.showLoading({
		title: "加载中"
	});
	if (!token&&!whiteList(options)) {
		// 执行没有登录的逻辑
		uni.reLaunch({
			url:'/pages/login/login'
		})
		uni.hideLoading()
		return;
	}
	if(whiteList(options)){
		uni.request({
			url: BASEURL + ':' + options.port + options.url,
			method: options.method,
			data: options.data,
			success: (response) => {
				return resolve(response)
			},
			fail: (err) => {
				return reject(err);
			},
			complete() {
				uni.hideLoading();
			}
		})
		return
	}
	uni.request({
		url: BASEURL + ':' + options.port + options.url,
		method: options.method,
		header: {
			Authorization:'Bearer '+ token
		},
		data: options.data,
		success: (response) => {
			if(response.statusCode==401){
				uni.showToast({
				  icon: 'error',
				  position: 'top',
				  title: '出错了，请尝试重新登录！'
				});
				return 
			}
			return resolve(response)
		},
		fail: (err) => {
			console.log('error', err)
			return reject(err);
		},
		complete() {
			uni.hideLoading();
		}
	})
}
 
// token 白名单
function whiteList(config) {
	let list = [
		(config.url == '/usr/session' && config.method == 'POST'),
	]
	let bol = false
	for (const item of list) {
		if (item) {
			bol = true
		}
	}
	return bol
}
```
2.新建user.js (@/api/user.js)
```
import { request} from '@/utils/request.js'
const userPort = '****' //定义端口号
 
export function Login(data) {
	return request({
		url: '/usr/session',
		method: 'POST',
		data,
		port: userPort
	})
}
 
export function getUserSession() {
	return request({
		url: '/usr/session',
		method: 'GET',
		port: userPort
	})
}
 
export function getUsers(data) {
	return request({
		url: '/usr/users',
		method: 'GET',
		port: userPort,
		data,
	})
}
```
3.页面中使用
```
<template>
    <view class="box">
    </view>
</template>
<script>
    import { Login} from '@/api/user.js'
    export default {
        async onLoad() {
            let queryData = {
               username: 'admin',
               password: '0000000'
            }
            const res = await login(queryData )
        }
    }
</script>
```

评论区

先去登录

uniapp使用vue方式封装请求

相关推荐

评论区