UniApp中封装uni.request请求,简化代码!

182 阅读1分钟

Java核心技术面试精讲 : www.sanzhishu.top/878.html SpringBoot后端Controller控制层接口示例:

; 1.在utils包下新建request.js文件

request.js中填写以下代码:


const BASE_URL = 'http://127.0.0.1:8088'

export const request = (options) => {
	return new Promise((resolve, reject) => {
		console.log(options.url);
		uni.request({
			url: BASE_URL + options.url,
			method: options.method || 'GET',

			header: {
				Authorization: uni.getStorageSync('token') ?
					`Bearer ${uni.getStorageSync('token')}` : '',
				Client: 'APP'
			},
			data: options.data || {},
			success: res => {
				const data = res.data
				if (data.code === 401) {
					uni.reLaunch({
						url: '/pages/login/login'
					})
					return
				}
				resolve(data)
			},
			fail: error => {
				uni.showToast({
					icon: 'error',
					title: '操作错误'
				})
				reject(error)
			}
		})
	})
}

截图:

2.在api包下新建login.js文件

login.js中填写以下代码:


import {request} from "@/utils/request";

export function getList() {
    return request({
        url: "/userLogin/list",
        method: "GET"

    });
}

截图:

3.在page的index.vue中编写请求

<script>
	import {getList} from "@/api/login/login"
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

			getList().then((res) => {
			  console.log(res);
			}).catch((err) => {
			  console.log(err);
			});

		},
		methods: {

		}
	}
</script>

截图:

4.页面返回结果

关注夏壹分享发送:资源 获取238本进阶书籍和大厂面试