uniapp封装request请求以及使用

在根目录创建utils文件
utils下创建一个request.js

request.js代码如下:

const baseUrl = '接口地址'; 
// 带 Token 请求
const request = (opts, data) => {
	uni.onNetworkStatusChange(function(res) {
		if (!res.isConnected) {
			uni.showToast({
				title: '网络连接不可用!',
				icon: 'none'
			});
		}
		return false
	});
	let token = uni.getStorageSync('token');
		let httpDefaultOpts = {
			url: baseUrl + opts.url,
			data: opts.data,
			method: opts.method || 'GET',
			header: opts.method == 'get' ? {
				'token': token,
				'X-Requested-With': 'XMLHttpRequest',
				"Accept": "application/json",
				"Content-Type": "application/x-www-form-urlencoded"
			} : {
				'token': token,
				'X-Requested-With': 'XMLHttpRequest',
				'Content-Type': 'application/json; charset=UTF-8'
			},
			dataType: 'json',
		}
		console.log('接口=',httpDefaultOpts);
		let promise = new Promise(function(resolve, reject) {
			uni.request(httpDefaultOpts).then(
				(res) => {
					console.log(res)
					if (res.data.code == 200) {
						resolve(res)
					} else {
						if (res.data.code == 401) {
							uni.showModal({
								title: '提示',
								content: res.data.message,
								success: function (res) {
									if (res.confirm) {
										uni.reLaunch({
											url: '/pages/index/index'
										});
										uni.clearStorageSync();
									} 
								}
							});
							uni.reLaunch({
								url: '/pages/index/index'
							});
							uni.clearStorageSync();
						} else {
							resolve(res)
							uni.showToast({
								title: '' + res.data.message,
								icon: 'none'
							})
						}
					}
				}
			).catch(
				(response) => {
					reject(response)
				}
			)
		})
		return promise
};

// 导出去
export default request;

根目录创建api文件

// /引入request.js文件
import request from "../../utils/request.js";

/* 登录 */ 
export function login(data) {
	return request({
		url: "/login",
		method: "post",
		data
	});
}
/* 获取验证码 */
export function captchaImage() {
	return request({
		url: '/captchaImage',
		method: 'get'
	})
}

页面使用如下:

<script>
	import {
		login,
		captchaImage
	} from "@/api/login/index.js"
	export default {
		data() {
			return {
				img: '',
				params: {
					username: '',
					password: '',
					uuid: '',
					code: ''
				}
			}
		},
		onShow() {
			this.getCaptchaImage()
		},
		methods: {
			/* 获取验证码 */
			async getCaptchaImage() {
				const res = await captchaImage()
			},
			/* 立即登录 */
			async goLogin() {
				const res = await login()
			}
		}
	}
</script>

  • 10
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值