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协议等。 总之,封装请求是现代网络应用中非常重要的一个环节。通过良好的封装请求,可以保证数据的安全和可靠性,从而提高应用的性能和用户体验。

目录
相关文章
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
12天前
|
供应链 数据挖掘 API
1688APP 原数据 API 接口的开发、应用与收益
1688作为阿里巴巴旗下的B2B平台,汇聚海量供应商和商品资源。其APP原数据API接口为开发者提供获取商品详细信息的强大工具,涵盖商品标题、价格、图片等。通过注册开放平台账号、申请API权限并调用接口,开发者可构建比价工具、供应链管理及自动化上架工具等应用,提升用户体验与运营效率,创造新的商业模式。示例代码展示了如何使用Python调用API并解析返回结果。
68 8
|
24天前
|
供应链 数据挖掘 API
1688app 商品详情接口系列(1688API)
1688作为国内知名批发采购平台,提供了一系列商品详情接口(API),助力企业和开发者获取商品基础、价格、库存及供应商信息。通过Python示例代码展示如何调用这些接口,应用场景涵盖采购决策辅助、数据分析与市场调研、电商平台整合及供应链管理系统的优化,为企业和采购商提供有力的数据支持,提升业务效率和竞争力。
67 15
|
1月前
|
JSON 数据挖掘 API
京东app商品详情API接口系列(京东 API)
本文介绍了使用 Python 调用京东商品详情 API 的方法。前期需安装 `requests` 库处理 HTTP 请求,导入 `json` 库解析 JSON 数据。接口通过商品 ID 获取详细信息,如价格、图片、评价等。示例代码展示了如何构建请求并处理响应数据。应用场景包括电商开发、市场调研和数据分析等,帮助提升用户体验、优化推荐系统及制定市场策略。
|
1月前
|
JSON 供应链 搜索推荐
淘宝APP分类API接口:开发、运用与收益全解析
淘宝APP作为国内领先的购物平台,拥有丰富的商品资源和庞大的用户群体。分类API接口是实现商品分类管理、查询及个性化推荐的关键工具。通过开发和使用该接口,商家可以构建分类树、进行商品查询与搜索、提供个性化推荐,从而提高销售额、增加商品曝光、提升用户体验并降低运营成本。此外,它还能帮助拓展业务范围,满足用户的多样化需求,推动电商业务的发展和创新。
67 5
|
2月前
|
供应链 搜索推荐 API
1688APP原数据API接口的开发、应用与收益(一篇文章全明白)
1688作为全球知名的B2B电商平台,通过开放的原数据API接口,为开发者提供了丰富的数据资源,涵盖商品信息、交易数据、店铺信息、物流信息和用户信息等。本文将深入探讨1688 APP原数据API接口的开发、应用及其带来的商业收益,包括提升流量、优化库存管理、增强用户体验等方面。
255 6
|
2月前
|
JSON API 数据格式
获取商品详情API的请求格式是什么
获取商品详情API的请求格式通常依赖于特定的电商平台或服务提供商,但一般遵循类似的结构。以下是一个概括性的说明,以及针对几个主流电商平台的示例:
|
2月前
|
API Python
利用python淘宝/天猫获得淘宝app商品详情原数据 API
要使用Python获取淘宝/天猫商品详情原数据,需先注册开放平台账号并实名认证,创建应用获取API权限。随后,根据API文档构建请求URL和参数,使用requests库发送请求,处理返回的商品详情数据。注意遵守平台使用规则。
|
4月前
|
缓存 监控 API
抖音抖店 API 请求获取宝贝详情数据的调用频率限制如何调整?
抖音抖店API请求获取宝贝详情数据的调用频率受限,需遵循平台规则。开发者可通过提升账号等级、申请更高配额、优化业务逻辑(如缓存数据、异步处理、批量请求)及监控调整等方式来应对。
|
4月前
|
缓存 负载均衡 API
抖音抖店API请求获取宝贝详情数据、原价、销量、主图等参数可支持高并发调用接入演示
这是一个使用Python编写的示例代码,用于从抖音抖店API获取商品详情,包括原价、销量和主图等信息。示例展示了如何构建请求、处理响应及提取所需数据。针对高并发场景,建议采用缓存、限流、负载均衡、异步处理及代码优化等策略,以提升性能和稳定性。

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 6
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 7
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程