/*
* @Author: cui
* @Date: 2021-03-03 18:48:12
* @LastEditors: 最后编辑时间
* @LastEditTime: 2021-03-05 14:55:12
* @Description: request请求
*/
/// <reference path = "../typings/methods.ts" />
import { RequestConfig } from '@/config/index'
import { showLoading } from '@/utils'
/**
* 根据访问路径和data生成key
* @param path 路径
* @param data 请求数据
*/
const createKey = (path: string, data: any) => `${JSON.stringify(data)}${path}`
//储存request请求map
const requestList: Map<string, UniApp.RequestTask> = new Map()
//是否正在加载中
let loadingBox: null | (() => null) = null
/**
* request请求
* @param param0 必要参数
* @param param1 配置
*/
const RequestMethod: RequestFunc.request = (
{ methodType = 'GET', data = {}, url = '' },
{ baseUrl = RequestConfig.baseUrl, header = {}, loading = true, dataType = 'json' } = {},
) => {
//加载动画
if (loading && loadingBox === null) {
console.log('开启加载')
//开启加载动画
loadingBox = showLoading()
}
return new Promise((resolve, reject) => {
//生成key
const requestKey = createKey(url, data)
// 加载动画
const requestClose = uni.request({
/** 服务器接口地址 */
url: `${baseUrl}${url}`,
/** 请求的参数 */
data: data,
/** 请求头 */
header: header,
/** 请求类型 */
method: methodType,
/** 超时时间 */
timeout: 3000,
/** 返回数据类型 */
dataType: dataType,
// 成功
success: res => {
//返回数据
resolve({
code: 200,
data: res.data as any,
})
},
// 失败
fail: err => {
reject(err)
},
// 最终执行
complete: () => {
// 移除request请求
requestList.delete(requestKey)
// 如果加载
if (loadingBox !== null && requestList.size === 0) {
// 关闭提示
loadingBox = loadingBox()
}
},
})
//先关闭上一个同路径同参数请求
requestList.get(requestKey)?.abort()
//存储请求
requestList.set(requestKey, requestClose)
})
}
//get请求
export const get = <R = AnyObject, T = AnyObject>(
url: string,
data?: T,
config?: RequestFunc.RequestConfig,
) =>
RequestMethod<R, T>(
{
methodType: 'GET',
url: url,
data,
},
config,
)
//post请求
export const post = <R = AnyObject, T = AnyObject>(
url: string,
data?: T,
config?: RequestFunc.RequestConfig,
) =>
RequestMethod<R, T>(
{
methodType: 'POST',
url: url,
data,
},
config,
)
/**
* 加载动画
* @param tips 提示语句
* @returns 关闭loading
*/
export const showLoading = (tips: string = '加载中...'): (() => null) => {
uni.showLoading({
title: tips,
mask: true,
})
uni.showNavigationBarLoading()
return () => {
uni.hideLoading()
uni.hideNavigationBarLoading()
return null
}
}
/*
* @Author: cui
* @Date: 2021-03-05 11:56:23
* @LastEditors: 最后编辑时间
* @LastEditTime: 2021-03-05 14:07:58
* @Description: request说明
*/
namespace RequestFunc {
//request请求
type RequestData<T> = {
/** 请求方式 */
methodType?: 'GET' | 'POST'
/** 传递的数据 */
data?: T
/** 路径 */
url: string
}
//请求设置
export type RequestConfig = {
/** 父路径 */
baseUrl?: string
/** 请求头 */
header?: any
/** 是否加载 */
loading?: boolean
/** 传递的data数据类型 */
dataType?: string
}
//返回数据类型
type RequestReturnData<T> = {
code: 200 | 500 | number
data: T
}
/**
* request请求
*/
export type request = <R = AnyObject, T = AnyObject>(
data: RequestData<T>,
config?: RequestConfig,
) => Promise<RequestReturnData<R>>
}
/*
* @Author: cui
* @Date: 2021-03-05 13:58:31
* @LastEditors: 最后编辑时间
* @LastEditTime: 2021-03-05 14:59:29
* @Description: api
*/
import { post } from '@/utils/request'
export const test = (test: string) =>
post<
{
test: string
},
{
test: string
}
>(' http://123.56.28.162:8080/api/verify/sendVerifyCode?phone=15010243648&codeType=LOGIN_CODE', {
test,
})
// 使用
async click() {
test(11)
test(22)
test(22)
test(224).then(res => {
console.log(res.data)
})
},
相同参数相同路径的请求会被阻止
image.png
写的时候 也有对应的提示
image.png
参数也有校验
image.png
同时发送多个请求 也只会一个加载结束一个加载动画
image.png
