uniapp 封装请求方法

目录

uni.request() 封装

uni.showLoading() 封装

使用 request() 方法

uni.request() 封装

// request.js

const BASE_URL = 'https://tea.qingnian8.com/api';

// 请求函数
export const request = (option = {}) => {
	// 解构并赋初始值
	let {
		url,
		data = {},
		method = "GET",
		header = {},
		loading = false
	} = option

	// 禁止 url 为空
	if (!url) return false

    // 拼接额外数据
	url = BASE_URL + url
	header['token'] = "xxx"

	// 加载中 动画	默认关闭
	if (loading) showLoading()

	// 返回数据
	return new Promise((resolve, reject) => {
		// 发送请求
		uni.request({
			url,
			data,
			header,
			method,
			success: (res) => {
				// 后端返回的数据异常
				if (res.data.errCode !== 0) {
					uni.showToast({
						title: res.data.errMsg,
						icon: "none"
					})
					reject(res.data) // 将失败的结果返回出去
				} else if (res.data.errCode === 400) {
					uni.showModal({
						title: "错误提示",
						content: res.data.errMsg,
						showCancel: false
					})
					reject(res.data) // 将失败的结果返回出去
				} else {
					resolve(res.data) // 将成功的结果返回出去
				}
			},
			// 请求失败
			fail: (err) => {
                uni.showToast({
					title: '服务响应失败',
					icon: "none",
				});
				reject(err)
			},
			complete: () => {
				uni.hideLoading()
			}
		});
	})
}

uni.showLoading() 封装

        防止在页面中连续或同时发送请求时调用多次 uni.showLoading() 方法。

// request.js

// 加载loading 封装
const showLoading=()=> {
	// 判断是否已经开启，true 则先关闭再重新开启
	const flag = uni.getStorageSync('loading')
	if (flag) {
		uni.setStorageSync('loading', false)
		uni.hideLoading()
	}

	// 开启 loading
	uni.showLoading({
		title: '加载中',
		success: () => {
			uni.setStorageSync('loading', true)
		},
		fail: () => {
			uni.setStorageSync('loading', false)
		}
	})
}

使用 request() 方法

// api.js

// 引入 request 方法
import { request } from '../utils/request.js'

// 用户个人信息
export const getUserInfo = (data) => {
	return request({
		url: '/bizhi/userInfo',
        data,
        loading:true
	})
}