uniapp封装promise接口

最新推荐文章于 2024-10-15 17:00:02 发布
最新推荐文章于 2024-10-15 17:00:02 发布
阅读量481 收藏 1
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_53089833/article/details/117004456
本文介绍如何在uni-app中封装Promise接口实现网络请求。通过在根目录创建request文件夹及request.js文件，编写网络请求代码，并在main.js中进行配置。文章还提及了在各小程序平台运行时配置域名白名单的重要性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

uniapp封装promise接口

uni-app题拱了uni.requet()方法，发起网络请求
首先在根目录里创建一个request文件夹，在里面创建request.js文件，在文件里编写发起网络请求的代码
在这里插入图片描述
在全局main.js中配置
在这里插入图片描述

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单
最后在组件中使用
在这里插入图片描述

_哆啦B梦
关注
【uni-app+Vue3】 API请求封装：让接口调用更便捷
共同学习，共同成长
07-10 4925
为了方便开发，我们可以进行API请求的解耦和封装，以便在多个页面中复用，并且可以统一处理错误信息等问题，提高开发效率和代码质量。
uni-app开发(Promise封装)
weixin_49356003的博客
05-18 654
作者：老吴 1，创建文件夹 在根目录里创建promise文件夹 在promise文件夹里面创建promise.js文件 - 2，封装promise 在promise.js文件中写入 const baseUrl='http://api.intewl.cn/api'//共有路径 export const myRequest = (url,method,data) => { return new Promise((resolve, reject) => { uni.showLoad.
uniapp Promise封装全局uni.request网络请求
2401_86332692的博客
08-03 2378
在一个项目开发时，我们除了页面布局之外，就是数据处理了，封装一个全局的网络请求，有助于我们处理一些公用逻辑代码，更加专注于业务代码。
【uniapp】使用Promise封装request
最新发布
春天的波菜
10-15 1207
使用Promise封装request。
UniApp发送请求,封装成更为方便使用的Promise
DOVISK的博客
10-08 855
在 UniApp 发送请求通常使用的是自带的uni.request()来发送，即如下但是这么使用的话，代码量一多就会发现出现了大量的重复代码，变得尤为繁琐，并且没有使用 Promise 来的方便，这时我们就会想到封装 uni.request()。而在 UniApp 中封装使用 Promise，可以帮助你更方便地处理异步请求。
使用Promise对uniapp网络请求简单封装
@喵咪
08-02 1401
在项目中多次需要多次发送网络请求于是封装，优化代码避免笼统 首先创建util文件夹紧接着创建api.js文件 打开api.js进行封装代码编写 const api = "http://10.10.10.4:8000/" //域名 //请求封装 function sendRequest(url,method,data){ var promise = new Promise(function(resolve,reject){ uni.request({ url:api+url, /.
uniapp的封装接口
09-19
总的来说，"uniapp的封装接口"是一个关键的开发实践，通过"common.rar"这样的模块化封装，开发者可以有效地提高开发效率，减少重复工作，同时提高代码的可读性和可维护性。在实际项目中，应当积极采用这种最佳实践，...
uniapp 封装请求
m0_65607651的博客
07-03 731
uniapp 封装请求
微信小程序之uniapp关于接口的封装
m0_49926116的博客
04-02 2331
微信小程序之uniapp关于接口的封装 第一步：使用promise封装一个get请求（post同理） //GET // 引入提示 let listing = function(urling){//这里动态传入url return new Promise((resolve,reject)=>{ uni.request({ url:urling, method:'GET', }) .then((res)=>{ resolve(res) }) .c
uniapp api请求接口 封装
qq_36958916的博客
05-27 3816
1，写一个公共的api.js let baseURL = 'http://443548ef.cpolar.cn/';//公共api地址。示范 export const myRequest = (options) => { return new Promise((resolve, reject) => { uni.request({ url: baseURL + options.url, //接口地址：前缀+方法中传入的地址 method: options.method || '
uniapp-request.zip-Promise方式封装uniapp请求
06-24
uniapp 请求方式嵌套一层Promise用async和await的形式去写代码，错误请求统一处理，类同步方式写代码告别回调地狱
uniapp 封装 promise 请求
qq_43789598的博客
07-31 532
uniapp封装promise请求
【uniapp】Promise简介
wahzx的博客
10-17 2424
在深入 UniApp 的实践之前，我们先快速了解一下 Promise。Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更强大、更合理。它最大的好处是在异步执行的流程中，避免了过度嵌套的回调函数（俗称“回调地狱”）。将 UniApp 中的异步操作封装成 Promise，不仅可以使代码结构更清晰，而且通过错误处理和异步操作控制提供了强大的灵活性。但需要注意的是，过度使用 Promise 也可能导致代码难以理解和维护，因此在实际开发中需要根据实际情况合理利用 Promise。
promise封装小程序api请求
wjw0125的博客
01-03 3746
在项目中我们使用请求 需要通过api封装 为什么封装api 因为在项目中 请求使用的地方会有很多 不利于后期维护 如果我我们讲api封装出来 只需要维护api文件就可以了 这里以uniapp封装api来写小程序为例 第一步 先在项目目录中创建一个utils文件夹 在该文件夹下创建一个js文件为请求的封装 代码如下 // 封装请求 const http = ({url, method='get', data=''}) => { return new Promise((resolve, re
Promise 在uniapp的简单使用
weixin_38946164的博客
06-02 5006
promise是什么？ 1、主要用于异步计算 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 3、可以在对象之间传递和操作promise，帮助我们处理队列
uniapp(uni.request Promise简单封装)
qwerwjs的博客
05-19 256
uniapp(uni.request Promise简单封装) 1.首先我们先在原有的基础目录上创建一个文件夹,在文件夹里面创建一个index.js文件 2.接下来我们进行封装 3.然后我们在全局里面在引用 在mian.js文件中引用 4.如何使用 ...
Promise封装uni-app请求
weixin_44714325的博客
07-02 771
封装 export default { // 全局配置 common:{ baseUrl:"http://ceshi3.dishait.cn/api", header:{ 'Content-Type':'application/json;charset=UTF-8', }, data:{}, method:'GET', dataType:'json' }, // 请求 返回promise request(options = {}){ // 组织参数 optio
Uniapp之API promise化
抚首
12-04 1572
本次要点： 1.promise是什么？ 2.promise怎么使用？ 1.promise是什么？ promise是一个对象，它代表了一个异步操作的最终完成或者失败。 2.promise怎么使用？ 接下来看一下我们之前是如何调用uniapp里面的API的： //这是一个request请求 uni.request({ url: 'https://www.example.com/request', success: (res) => { console...
uniapp 封装请求接口
11-15
以下是在uniapp中封装请求接口的方法： 1. 在common目录下新建一个api.js文件，用于存放所有的接口请求方法。 2. 在api.js文件中引入uni.request方法，并定义一个request方法，用于发送请求。 ```javascript import Vue from 'vue' const request = (url, method, data) => { return new Promise((resolve, reject) => { uni.request({ url: url, method: method, data: data, header: { 'Content-Type': 'application/json' }, success: (res) => { resolve(res.data) }, fail: (err) => { reject(err) } }) }) } export default request ``` 3. 在api.js文件中定义一个getUserInfo方法，用于获取用户信息。 ```javascript import request from './api.js' const getUserInfo = (params) => { return request('/api/user/info', 'GET', params) } export default { getUserInfo } ``` 4. 在需要使用接口的页面中引入getUserInfo方法，并调用它。 ```javascript import api from '@/common/api.js' export default { data() { return { userInfo: {} } }, mounted() { this.getUserInfo() }, methods: { getUserInfo() { api.getUserInfo({}).then(res => { this.userInfo = res.data }) } } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值