uniapp封装promise请求/上传图片等常用类

2023-11-23 21:24:28

uniapp封装常用类（请求、上传图片、上一页，精准数值计算，精准类型判断，空对象判断，根据两点的经纬度计算两点之间直线距离）

安装教程

1. npm i rt-uni-utils

使用说明

1. uniapp.request请求使用方法：

###根目录下新建config文件夹，新建config.ts，代码如下：

class Config {
    baseURL = '';//接口地址
    ossURL = ''; //图片地址
    constructor() {
        if (process.env.NODE_ENV === 'development') {
            //开发环境 运行
              this.baseURL = 'http://127.0.0.1:8080'; //本地地址
                      this.ossURL = 'http://xxxxxxx';
        } else {
            //生产环境 发行
            this.baseURL = 'http://xxx.xxxx.com'; //正式地址
                        this.ossURL = 'http://xxxxxxx';
        }
    }
}
export default new Config();

后端返回格式要求如下：

{
  ok:false,//true或者fasle
  msg:'', //成功货失败的提示
  payload:null //数据
}

前端默认格式如下：Authorization请求头，（不管是post还是get，content-type都是application/json），因为一般只用post和get，所以封装了两种方法

 header:{
         'content-type': 'application/json',
         Authorization: uni.getStorageSync('token') //请求头
    }

请求成功是根据ok===true继续执行，类似于code===200，ok===false就抛出异常

res.statusCode === 401未登录或者res.statusCode===400登录过期

都会跳转到登录页默认'../../pages/login/login'

新建文件夹api，api下新建vo文件夹,新建login.ts

//定义Iuser类
export class Iuser {
    code:string = "";
    mobile:string = ""
}

文件夹api下新建login.ts文件

import uniHttp from 'rt-uni-utils/request';
import { Iuser } from './api/vo/login';//这里定义的api下的vo文件里定义的class
class User {
        // 登录
    login(data: Iuser){
        return uniHttp.post('/auth/shop/login',data) //post方法
                
        //return uniHttp.get('/auth/shop/login',data) //get方法
    }

}
export const user = new User(); //暴露

在登录页面login.vue中使用

//引入     
import { user } from '../../../api/login';
import { Iuser } from '../../../api/vo/login'; //这里定义的api下的vo文件里定义的class

    //vue2写法
    <template>
        <input type="number" maxlength="11" placeholder="手机号" v-model="info.mobile"/>
        <input type="number" maxlength="6" placeholder="验证码" v-model="info.code"/>
    </template>
        data() {
                return {
                        info:new Iuser()
                    }
                },
                methods:{
                    async login() {
                        const res = await user.login(this.info).catch((err) => { 
                            //如果需要处理异常,请写在这里 一般无需处理,去掉catch即可,因为封装时请求失败已经集中处理(uni.showToast提示了)
                        
                        });    
                        console.log('res',res)
                        //登录成功后的操作,例如缓存token、用户信息等
                    }
                    
                }
        
    //vue3写法
    <template>
        <input type="number" maxlength="11" placeholder="手机号" v-model="info.mobile"/>
        <input type="number" maxlength="6" placeholder="验证码" v-model="info.code"/>
    </template>
    
    <script setup lang="ts">
        const data = reactive({
            info:new Iuser() 
        })
        const { info } = toRefs(data)
        const getVerificationCode = async()=>{
            const res  = await user.login(info).catch((err) => {
                //如果需要处理异常,请写在这里 一般无需处理,去掉catch即可,因为封装时请求失败已经集中处理(uni.showToast提示了)
            });
            console.log('res',res)
            //登录成功后的操作,例如缓存token用户信息等
        }
    </script>

2. uniapp.upload上传图片使用方法：header默认加Authorization

name: 'file',
header: {
        content-type': 'application/json',
        Authorization: uni.getStorageSync('token')
    }

在api文件夹下的info.ts中使用和uniHttp用法一样

import uniImg from 'rt-uni-utils/upload';
import uniImg from 'rt-uni-utils/uploadLimit';

class Info {
    uploadCard(data:uploadLimit){
            return uniImg.upload('/api/upload/upload_file',data)
        }
}
export cosnt info = new Info() //暴露

在上传图片的页面upload.vue中使用

import {info} from '../../../api/info' //引入

    //vue2写法
        data() {
            return {
                    img:'', //单图
                    imgs:[] //多图
                }
            },
        methods:{
            async uploadImg() { //单图
                const res: any = await info.uploadCard(1)
                this.img = res[0].url
            }
            async uploadImgs() { //多图
                const res: any = await info.uploadCard(9,this.imgs) //this.imgs必须，为了控制还能选几张图
                this.imgs = this.imgs.concat(res)
            }
        } 
        
    //vue3写法
    const img = ref('') //单图
    const imgs = reactive([]) //多图
    
    const uploadImg = async()=>{ //单图
        const res: any = await info.uploadCard(1) 
        img.value = res[0].url 
    } 
    const uploadImgs = async()=>{ //多图
        const res: any = await info.uploadCard(9,imgs) //imgs必传，为了控制手机相册还能选几张图
        imgs = imgs.concat(res) 
    }

3. uniapp上一页，修改上一页的数据或者调用上一页的方法

import { PrevPage } from 'rt-uni-utils/prevPage';

let prevPage:any = new PrevPage();
prevPage.list = [] //修改上个页面的数据
prevPage.getList();//调用上个页面的方法

4. 精准计算，为了解决js计算精度丢失的问题，使用之前请 npm i decimal.js;

 import { cal } from 'rt-uni-utils/cal';
 
 let a =0.88;
 let b = 0.99;
 let result:number //计算结果

 result = cal.jia(a,b) //加
 result = cal.jian(a,b) //减
 result = cal.cheng(a,b) //乘
 result = cal.chu(a,b) //除

5. 判断数据类型

import { dataType } from 'rt-uni-utils/dataType';

dataType.val([])             // 返回"Array"
dataType.val({})             // 返回"Object"
dataType.val('123')          // 返回"string"
dataType.val(window)         // 返回"Window"
dataType.val(null)           // 返回"Null"
dataType.val(undefined)     // 返回"undefined"
dataType.val()              // 返回"undefined"
dataType.val(function(){})  // 返回"function"
dataType.val(NaN)            // 返回"number"
dataType.val(/123/g)        //返回"RegExp"

6. 空对象判断

 import { emptyObj } from 'rt-uni-utils/emptyObj';

emptyObj.judge({name:'小明'}) //返回false
emptyObj.judge({}) //返回true

7. 根据两点的经纬度计算两点之间直线距离，实际路程建议直线距离乘以1.4

import { distance } from 'rt-uni-utils/distance';
distance.val(40.1835390,115.823092,40.4411433,119.882540) //返回公里

码农公寓