uniApp：使用vue3+Vite4+pinia+sass技术栈构建（02）-封装api请求

前言

在纯vue3开发的时候，使用axios进行api请求，但在uniapp中还需要安装axios的适配器uniapp-axios-adapter，否则小程序或者app请求不兼容。文档地址uniapp-axios-adapter - DCloud 插件市场

但在这里我们不使用axios,而是使用uniapp提供的请求方法 uni.request 进行封装。uni.request方法链接

开始封装

最终目录

1.创建请求文件   

/src/service/service.ts -基础访问类

/src/service/api.ts -对外提供接口访问

/src/service/module/user.ts -文件夹存放每个模块的访问接口

2.首先创建基础访问类

service.ts

import { useStore } from "@/store/user"  //引入pinia 获取用户登录后的token

//通过env文件，区分开发环境和正式环境
if (import.meta.env.MODE === "development") {
    BASE_URL = import.meta.env.VITE_DEV_URL
} else {
    BASE_URL = import.meta.env.VITE_PRO_URL
}

const isUrl = (url: string) => {
    let rx = /^http?/i
    if (rx.test(url)) {
        return true
    } else {
        return false
    }
}

//定义请求类型
enum methodtType {
    GET = "GET",
    OPTIONS = "OPTIONS",
    HEAD = "HEAD",
    POST = "POST",
    PUT = "PUT",
    GDELETEET = "DELETE",
    TRACE = "TRACE",
    CONNECT = "CONNECT",
}
//请求类
class urlRequest {
    header = {
        PCTOKEN: useStore().userInfo.token  //登录token，key根据实际情况修改
    }
    setHeader(header: any) {  //提供修改header的方法，不过不需要可以删除
        this.header = header
    }
    request(
        url: string,
        method: methodtType,
        params: Array<String> = [],
        showError: boolean = true  //可以不要，留在这里的意思是出错信息要不要再基类中处理，例如需要登录的接口没有登录，提示用户登录
    ) {
        let request_url = url
        if (!isUrl(url)) {  // 判断一下传过来的地址是带有域名还是不带有域名，提高代码的扩展性。
            request_url = BASE_URL + url
        }
        return new Promise((resolve, reject) => {
            uni.request({
                url: request_url,
                method: method || "GET",
                header: this.header,
                data: params,
                success: (res: any) => {
                    resolve(res.data)
                    if (showError) {

                    }
                },
                fail: (err) => {
                    reject(err)
                },
            })
        })
    }
    /**
    *检查网络
    */
    getNetworkType() {
        //判断是否有网络
        uni.getNetworkType({
            success: function (res) {
                if (res.networkType === "none") {
                    uni.showToast({
                        icon: "none",
                        title: "网络异常，请检测网络配置!",
                        duration: 2000,
                    })
                }
            },
        })

    }
    get(url: string, params: any = []) {
        this.getNetworkType()
        return this.request(url, methodtType.GET, params)
    }
    post<T = any>(url: string, data: any = [], showError: boolean = true) {
        this.getNetworkType()
        return this.request(url, methodtType.POST, data, showError) as unknown as T
    }
    //还可以添加methodtType类型中的方法，如果有需要。
}
export default new urlRequest()

3.创建每个模块的访问接口 user.ts

import service from "../service"
const user = {
    getUserInfo() {
        return service.post("/api/getUserInfo", {})
    }
}
export default user

4.创建api.ts

import user from "./module/user"

export {
    user
}

5.页面调用接口

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" />
		<view class="text-area">
			<text class="title">{{ title }}-{{ userInfo.userInfo.username }}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useStore } from "@/store/user"
import { user } from "@/service/api"
const userInfo = useStore()
user.getUserInfo().then((res: any) => {
	userInfo.setUserInfo(res.datas)
})
const title = ref("Hello")
</script>

主意：

service.ts 中使用到了.env  ,和src同级目录，不在src里面，不在src里面

# 开发环境
VITE_DEV_URL='https://www.fastmock.site/mock/89a2cebcedc1f69e1d57f0b89ab28500/test'

# 正式环境
VITE_PRO_URL=''