uniapp封裝promise請求和上傳圖片async+await 支持vue3 上傳圖片、上一頁，精准數值計算，精准類型判斷，空對象判斷，根據兩點的經緯度計算兩點之間直線距離

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) //返回公里