uni请求封装模块化（个人笔记）

1. - http.js 跟目录新建server文件夹

import LocalCache from "@/utils/cache.js"
import {
	login
} from "@/server/api/login.js"
// url
// method
// header
// data
const ErrStatus = {
	400: '请求参数错误',
	401: '身份验证已过期，请重新登录',
	403: '服务器拒绝请求',
	404: '请求地址错误',
	405: '请求方法错误',
	408: '请求超时 ',
	500: '服务器错误 ',
	501: '服务器错误 ',
	502: '服务器错误 ',
}
//基本域名 ，配置option，是否显示loading
function http(BaseUrl, options = {}, showLoading = true) {
	options.url = `${BaseUrl}${options.url}`;
	console.log('请求信息-', options);
	if (options.header) {
		options.header = {
			...options.header,
			'Authorization': ''
		}
	} else {
		options.header = {
			'Authorization': ''
		}
	}
	// 通过自定义工具函数判断本地用户信息是否存在登录凭证，如果存在则带上请求头 
	// const userInfo = LocalCache.getCache('userInfo')
	if (userInfo && userInfo.token) {
		options.header.Authorization = `Bearer ${userInfo.token}`
	}
	return new Promise((resolved, rejected) => {
		if (showLoading) {
			uni.showLoading({
				// title:'加载中',
				mask: true //是否开启防止穿透
			})
		}
		options.success = (res) => {
			console.log('返回来的信息-',res);
			if (res.statusCode == 200||res.statusCode == 201) {
				// 请求回来的状态码为200则返回内容
				if(res.data&&res.data.type=='success'){ //存在返回信息
					resolved(res)
				}else if(res.data==''){//不存在返回信息但是成功状态
                                        resolved(res)
				}else{
					// 请求成功，但是其他错误
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: `${res.data.message}`
					});
					rejected(res)
				}
				
			} else {
				// 如果请求回来的状态码不是成功则执行以下操作
				// 非成功状态码弹窗
				uni.showToast({
					icon: 'none',
					duration: 3000,
					title: `${ErrStatus[res.statusCode]}`
				});
				// 登陆失效
				if (res.statusCode === 401) {
					//  清除本地token
					LocalCache.clearCache()
					// 关闭所有页面返回到登录页
					setTimeout(()=>{
						uni.reLaunch({
							url: '/pages/views/login/login'
						})
					},1000)
					// console.log('身份验证过期，跳转登录页');
				}
				// 返回错误信息
				rejected(res)
			}
		};
		options.fail = (err) => {
			// 请求失败弹窗
			uni.showToast({
				icon: 'error',
				duration: 2000,
				title: ErrStatus[res.statusCode]
			});
			rejected(err);
		};
		options.complete = () => {
			uni.hideLoading()
		}
		uni.request(options);
	});
}

export default http;

2. -baseUrl.js server文件夹下面新建config文件夹

let BaseUrl=''
 if(process.env.NODE_ENV==="development"){
 	console.log('环境判断:开发环境')
 	BaseUrl='' 
 }else{
 	console.log('环境判断:正式环境')
         BaseUrl='' 
 }
export default  BaseUrl

3.test.js 放在server文件夹下面的api文件夹

import http from "@/server/http.js"
import BaseUrl from "@/server/config/baseUrl.js"

export function postTest(data){
	return http(BaseUrl,{
		url:url,
		method:'POST',
		data:data
	},false)
}

export function getTest(){
	return http(BaseUrl,{
		url:url,
		method:'GET'
	})
}

4.页面使用

import {postTest,getTest} from "@/server/api/test.js"
    methods: {
    //按钮点击事件
        submitGet:async function(){
           const res =  await getTest()
           console.log(res)
        },
          submitPost:async function(){
            const res = await postTest({data:'阿毛子'})
            console.log(res)
        }
    }