uni-app API请求封装:让接口调用更加简单高效

简介: 在进行uni-app开发时,网络请求是必不可少的环节。为了方便开发,我们可以封装一些网络请求方法,以便在多个页面中复用,并且可以统一处理错误信息等问题,提高开发效率和代码质量。本文将介绍如何封装网络请求方法。

前言

uni-app是一款基于Vue.js框架的跨平台开发工具,可以将代码编译成H5、小程序、App等不同平台的应用。在进行uni-app开发时,网络请求是必不可少的环节。为了方便开发,我们可以封装一些网络请求方法,以便在多个页面中复用,并且可以统一处理错误信息等问题,提高开发效率和代码质量。本文将介绍如何封装网络请求方法。

正文内容

1、封装 uni.request 请求:

在根目录创建 until 目录,在目录下创建 request.js 文件,编写以下代码

// 全局请求封装
const base_url = 'http://localhost:996'
// 需要修改token,和根据实际修改请求头
export default (params) => {
   
    let url = params.url;
    let method = params.method || "get";
    let data = params.data || {
   };

    let header = {
   }
    if (method == "post") {
   
        header = {
   
            'Content-Type': 'application/json'
        };
    }
    // 获取本地token
    if (uni.getStorageSync("token")) {
   
        header['Authorization'] = 'Bearer ' + uni.getStorageSync("token");
    }

    return new Promise((resolve, reject) => {
   
        uni.request({
   
            url: base_url + url,
            method: method,
            header: header,
            data: data,
            success(response) {
   
                const res = response
                // 根据返回的状态码做出对应的操作
                //获取成功
                console.log(res.statusCode);
                if (res.statusCode == 200) {
   
                    resolve(res.data);
                } else {
   
                    uni.clearStorageSync()
                    switch (res.statusCode) {
   
                        case 401:
                            uni.showModal({
   
                                title: "提示",
                                content: "请登录",
                                showCancel: false,
                                success(res) {
   
                                    setTimeout(() => {
   
                                        uni.navigateTo({
   
                                            url: "/pages/login/index",
                                        })
                                    }, 1000);
                                },
                            });
                            break;
                        case 404:
                            uni.showToast({
   
                                title: '请求地址不存在...',
                                duration: 2000,
                            })
                            break;
                        default:
                            uni.showToast({
   
                                title: '请重试...',
                                duration: 2000,
                            })
                            break;
                    }
                }
            },
            fail(err) {
   
                console.log(err)
                if (err.errMsg.indexOf('request:fail') !== -1) {
   
                    wx.showToast({
   
                        title: '网络异常',
                        icon: "error",
                        duration: 2000
                    })
                } else {
   
                    wx.showToast({
   
                        title: '未知异常',
                        duration: 2000
                    })
                }
                reject(err);

            },
            complete() {
   
                // 不管成功还是失败都会执行
                uni.hideLoading();
                uni.hideToast();
            }
        });
    }).catch((e) => {
   });
};

2、封装对应的 api 文件

在实际项目中,我们也会根据上述请求,封装对应的 api ,所以,我们在根目录下创建 api ,里面放与项目相关的 api

// 引入 request 文件
import request from '@/utils/request'

// 以下 api 为博主项目示例,实际与项目相匹配

// 分页查询学习列表
export const pageStudyInfo = (params) => {
   
    return request({
   
        url: '/study/studyInfo/page',
        method: 'get',
        data: params
    })
}

// 查询学习列表
export const listStudyInfo = (params) => {
   
    return request({
   
        url: '/study/studyInfo/list',
        method: 'get',
        data: params
    })
}


// 获取学习列表详细信息
export const studyInfoById= (id) => {
   
    return request({
   
        url: '/study/studyInfo/'+id,
        method: 'get',
    })
}

// 增加学习列表
export const saveStudyInfo = (params) => {
   
    return request({
   
        url: '/study/studyInfo',
        method: 'post',
        data: params
    })
}

// 修改学习列表
export const updateStudyInfo = (params) => {
   
    return request({
   
        url: '/study/studyInfo',
        method: 'put',
        data: params
    })
}

// 删除学习列表
export const deleteStudyInfo = (id) => {
   
    return request({
   
        url: '/study/studyInfo/delete?id='+id,
        method: 'delete',
    })
}

3、在相关页面使用 封装的 api (以 Vue3 为例)

<script setup>
    // 在页面中导入相关 api 
    import {
   pageStudyInfo,listStudyInfo} from "@/api/study/info";

    // 定义存储请求的结果
    const studyList = ref([]);

    // 也买你加载完毕执行
    onMounted(() => {
   
        // 调用函数
        getStudyList();
    })
    // 封装函数,调用 api
    const getStudyList = async () => {
   
        let res = await pageStudyInfo(queryParams);
        console.log(res.data.records);
        studyList.value = res.data.records;
    }
</script>

总结

封装请求是指在传输层或应用层对请求数据进行包装,以便在网络中传输和处理。封装请求的好处在于提高数据的安全性、减少网络传输的开销、方便协议的扩展和升级等。 在封装请求时,需要考虑请求的类型、格式、大小、传输协议、加密方式等因素。常见的封装请求的方式有URL编码、JSON格式、XML格式、HTTP协议等。 总之,封装请求是现代网络应用中非常重要的一个环节。通过良好的封装请求,可以保证数据的安全和可靠性,从而提高应用的性能和用户体验。

目录
相关文章
|
3天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
24 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
2月前
|
JSON API 数据格式
获取商品详情API的请求格式是什么
获取商品详情API的请求格式通常依赖于特定的电商平台或服务提供商,但一般遵循类似的结构。以下是一个概括性的说明,以及针对几个主流电商平台的示例:
|
4月前
|
缓存 监控 API
抖音抖店 API 请求获取宝贝详情数据的调用频率限制如何调整?
抖音抖店API请求获取宝贝详情数据的调用频率受限,需遵循平台规则。开发者可通过提升账号等级、申请更高配额、优化业务逻辑(如缓存数据、异步处理、批量请求)及监控调整等方式来应对。
|
4月前
|
缓存 负载均衡 API
抖音抖店API请求获取宝贝详情数据、原价、销量、主图等参数可支持高并发调用接入演示
这是一个使用Python编写的示例代码,用于从抖音抖店API获取商品详情,包括原价、销量和主图等信息。示例展示了如何构建请求、处理响应及提取所需数据。针对高并发场景,建议采用缓存、限流、负载均衡、异步处理及代码优化等策略,以提升性能和稳定性。
|
3月前
|
JSON API 数据格式
携程API接口系列,酒店景点详情请求示例参考
携程API接口系列涵盖了酒店预订、机票预订、旅游度假产品预订、景点门票预订等多个领域,其中酒店和景点详情请求是较为常用的功能。以下提供酒店和景点详情请求的示例参考
|
4月前
|
JavaScript 前端开发 Java
多种语言请求API接口方法
每种语言和库的选择取决于具体需求、项目环境以及个人偏好。了解这些基本方法,开发者就可以根据项目需求选择合适的语言和库来高效地与API交互。
72 1
|
4月前
|
存储 数据可视化 JavaScript
可视化集成API接口请求+变量绑定+源码输出
可视化集成API接口请求+变量绑定+源码输出
114 4
|
5天前
|
API PHP 开发者
速卖通商品详情接口(速卖通API系列)
速卖通(AliExpress)是阿里巴巴旗下的跨境电商平台,提供丰富的商品数据。通过速卖通开放平台(AliExpress Open API),开发者可获取商品详情、订单管理等数据。主要功能包括商品搜索、商品详情、订单管理和数据报告。商品详情接口aliexpress.affiliate.productdetail.get用于获取商品标题、价格、图片等详细信息。开发者需注册账号并创建应用以获取App Key和App Secret,使用PHP等语言调用API。该接口支持多种请求参数和返回字段,方便集成到各类电商应用中。
|
11天前
|
JSON API 数据格式
微店商品列表接口(微店 API 系列)
微店商品列表接口是微店API系列的一部分,帮助开发者获取店铺中的商品信息。首先需注册微店开发者账号并完成实名认证,选择合适的开发工具如PyCharm或VS Code,并确保熟悉HTTP协议和JSON格式。该接口支持GET/POST请求,主要参数包括店铺ID、页码、每页数量和商品状态等。响应数据为JSON格式,包含商品详细信息及状态码。Python示例代码展示了如何调用此接口。应用场景包括商品管理系统集成、数据分析、多平台数据同步及商品展示推广。
|
2天前
|
监控 供应链 搜索推荐
亚马逊商品详情接口(亚马逊 API 系列)
亚马逊作为全球最大的电商平台之一,提供了丰富的商品资源。开发者和电商从业者可通过亚马逊商品详情接口获取商品的描述、价格、评论、排名等数据,对市场分析、竞品研究、价格监控及业务优化具有重要价值。接口基于MWS服务,支持HTTP/HTTPS协议,需注册并获得API权限。Python示例展示了如何使用mws库调用接口获取商品详情。应用场景包括价格监控、市场调研、智能选品、用户推荐和库存管理等,助力电商运营和决策。
45 23

热门文章

最新文章