uniapp 请求的封装 易懂版

目录

swagger接口文档

运行效果

代码演示

api->api.ts

api->request.ts

pages->details->details.vue

type->article.ts 

---

swagger接口文档

运行效果

代码演示

api->api.ts

import Request from '@/api/request.ts'
var request = new Request().http
//文章list接口
interface ArticleList {
    parentId: string,
    pageNumVO: {
        current: number,
        size: number
    }
}
export function getArticleList(data:ArticleList) {
    return request({
        url: "/article-category/toFrontArticles",
        method: "post",
        data
    })
}

api->request.ts

//后台请求根路径
var baseURL="https://www.xxxx.com/"
export default class Request {
    http(param) {
        // 请求参数
        var url = param.url,
            method = param.method,
            header = {
				'content-type': "application/json"
			},
            data = param.data || {},
            token = param.token || "",
            hideLoading = param.hideLoading || false;

        //拼接完整请求地址
        var requestUrl = baseURL + url;
		//请求方法
        if (method) {
            method = method.toUpperCase(); //小写改为大写
        }
        //加载圈
        if (!hideLoading) {
            uni.showLoading({
                title: '加载中...'
            });
        }

        // 返回promise
        return new Promise((resolve, reject) => {
            // 请求
            uni.request({
                url: requestUrl,
                data: data,
                method: method,
                header: header,
                success: (res) => {
                    // 判断 请求api 格式是否正确
                    if (res.statusCode && res.statusCode != 200) {
                        uni.showToast({
                            //后台把错误请求信息放在msg中 你们可以根据自己公司的规格来
                            title: res.data.msg,
                            icon: 'none'
                        });
                        return;
                    }
                    // 将结果抛出
                    resolve(res.data)
                },
                //请求失败
                fail: (e) => {
                    uni.showToast({
                        title: "" + e.data.msg,
                        icon: 'none'
                    });
                    resolve(e.data);
                },
                //请求完成
                complete() {
                    //隐藏加载
                    if (!hideLoading) {
                        uni.hideLoading();
                    }
                    resolve();
                    return;
                }
            })
        })
    }
}

pages->details->details.vue

<template>
	<view>
		<h2>文章列表</h2>
		<view class="btn">
			
		</view>
		
	</view>
</template>

<script setup>
	import {
		getArticleList
	} from '../../api/api.ts'
	import { onMounted, reactive } from "vue";
	import { InitData } from "../../type/article";
	//文章列表数据定义
	const artList = reactive(new InitData());
    //获取文章list
	const getlist = () => {
		getArticleList(artList.articleList)
			.then((res) => {
				console.log("请求数据");
				console.log(res.data);
				artList.list = res.data;
			})
	}
	//生命周期函数 调用方法请求接口
	onMounted(()=>{
	  getlist();
	})
</script>

<style>

</style>

type->article.ts 

//文章列表数据类型
export interface ListInt {
    pkId: string,
    articleName: string,
    author: string,
    synopsis: boolean,
    gmtModified: string,
    showPicUrl: string,
}
//文章list接口
interface ArticleList {
    parentId: string,
    pageNumVO: {
         //当前页
        current: number,
        //每页显示条数
        size: number
    }
}
export class InitData {
    //分页
    articleList: ArticleList = {
        parentId: "1521836474786492416",
    pageNumVO: {
         //当前页
        current: 1,
        //每页显示条数
        size: 10
    }
    }
    //展示的内容数据
    list: ListInt[] = []
}