使用uniapp封装uni.request

封装封装uni.request

创建utils文件夹，创建httpRequesrt.ts

import { loginStore } from '../store/index';

// 请求基地址
const baseURL = 'http://192.168.22.26:8080';


// 拦截器配置
const httpInterceptor = {
	// 拦截前触发
	invoke(options : UniApp.RequestOptions) {
		// 1. 非 http 开头需拼接地址
		if (!options.url.startsWith('http')) {
			options.url = baseURL + options.url;
		}
		// 2. 请求超时
		options.timeout = 8000;
		// 3. 添加小程序端请求头标识
		options.header = {
			'source-client': 'miniapp',
			...options.header,
		};
		// 4. 添加 token 请求头标识
		const useloginStore = loginStore();

		const token = useloginStore.profile;

		if (token) {
			options.header.Authorization = `Bearer ${token}`;
		}
	},
};

// 拦截 request 请求
uni.addInterceptor('request', httpInterceptor);
// 拦截 uploadFile 文件上传
uni.addInterceptor('uploadFile', httpInterceptor);

interface Data<T> {
	code : string
	msg : string
	result : T
}

export const http = <T>(options : UniApp.RequestOptions) => {
	return new Promise<Data<T>>((resolve, reject) => {
		uni.request({
			...options,
			sslVerify: false,
			success(res) {
				if (res.statusCode >= 200 && res.statusCode < 300) {
					resolve(res.data as Data<T>);
				} else if (res.statusCode == 401) {
					const useloginStore = loginStore();
					useloginStore.clearProfile();
					uni.navigateTo({ url: '/pages/login/login' });
					reject(res);
				} else {
					uni.showToast({
						title: (res.data as Data<T>).msg || '请求错误！',
						icon: 'none',
					});
					reject(res);
				}
			},
			fail(error) {
				uni.showToast({
					title: '网络错误，换个网络试试！',
					icon: 'none',
				});
				reject(error);
			},
		});
	});
};

本地存储token

import { defineStore } from 'pinia';
import { ref } from 'vue';

// 定义 Store
export const loginStore = defineStore(
	'login',
	() => {
		// 会员信息
		const profile = ref();

		// 保存会员信息，登录时使用
		const setProfile = (val) => {
			profile.value = val;
		};

		// 清理会员信息，退出时使用
		const clearProfile = () => {
			profile.value = undefined;
		};

		// 记得 return
		return {
			profile,
			setProfile,
			clearProfile,
		};
	},
	// TODO: 持久化
	{
		// 网页端配置
		// persist: true,
		// 小程序端配置
		persist: {
			storage: {
				getItem(key) {
					return uni.getStorageSync(key);
				},
				setItem(key, value) {
					uni.setStorageSync(key, value);
				},
			},
		},
	}
);

使用

import { http } from '../utils/httpRequest';
type LoginParams = {
	code : string
}

/** 小程序登录*/
export const Userlogin = (data : LoginParams) => {
	return http({
		method: 'POST',
		url: '/wx/v1/user/login',
		data,
	});
};