uni.app 请求接口二次封装

最新推荐文章于 2024-05-28 09:15:00 发布
最新推荐文章于 2024-05-28 09:15:00 发布
阅读量503 收藏
点赞数
分类专栏： 封装propmise uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengshaopu/article/details/117224431
版权
本文主要介绍了在uni.app中遇到的token过期问题及其解决方案。通过在首次封装的请求接口基础上进行二次封装，将token保存到本地存储，并确保后续接口调用能正确携带token。
摘要由CSDN通过智能技术生成

问题一、token过期

在这里插入图片描述

  1. 在这里是因为token得提交到header里面 所以我们在第一次封装的请求接口的时候

第一次封装的地址：

  1. uni.app第一次封装
  2. 因为要提交到herader里面后面的接口都要用到token相当于令牌 所以要进行二次分装
    1.在第一次封装的正确返回值下面在封装一次先把token值存到本地存储里面
    2.在封装跟上面一样即可

module.exports = {
    	request(url, method, data) {
    		uni.showLoading({
    			title: "加载中"
最低0.47元/天 解锁文章
fengshaopu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uni-app-framework.rar
04-23
uni-app的核心在于其独特的抽象层，它将不同平台的原生特性进行了封装，使得开发者可以以统一的方式来操作各种平台的特性。在uni-app中，主要有以下关键概念： 1. 页面（Page）：uni-app中的页面类似于Vue组件，...
uniapp 中uni.request请求一下触发两次以及预检请求解决办法
jiangjialuan2的博客
03-31 2177
对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。Access-Control-Allow-Methods,’: POST, GET, OPTIONS’来允许服务器允许客户端使用 POST, GET 和 OPTIONS 方法发起请求;
请求uniRequest，会请求两次
weixin_30407099的博客
06-06 3919
实际上就是服务器要预检一次接口，默认5,6秒一次，可自行更改'Access-Control-Allow-Headers', 'appId' 来允许服务器请求中携带字段appId，如果还有其它字段，可以用逗号分隔填入； 'Access-Control-Allow-Methods',': POST, GET, OPTIONS'来允许服务器允许客户端使用 POST, GET 和 OPTIONS 方法发...
uniapp网络请求二次封装
最新发布
weixin_45874968的博客
05-28 282
HTTP文件夹，函数移到单独的文件中，以提高代码的可维护性和可重用性和以便于在其他地方重用这些错误处理逻辑。3、errorHandlers.js文件、实现状态非200的处理和请求错误的代码实现。实现uni.request的网络请求封装。api文件夹，大体相同，为了更好的修改。我的代码不是最完美的，只是提供一些建议。实现请求地址的管理及请求拦截器管理。1、api是存放每一个请求的接口。1、requests.js文件。2、http存放封装的请求。2、config.js文件。
uniapp跨域两次请求解决方案
dejz8829的专栏
04-01 1975
引入qs模块 使用 qs模块将data序列化，再传递，注意header必须设置为 'content-type':'application/x-www-form-urlencoded', import qs from 'qs'; data = qs.stringify(data); uni.request({ url: base_api_url + url...
在uniapp使用过程中，调用的接口均变成调用两次，找了一天才找到原因
weixin_45641191的博客
03-23 2540
在uniapp使用过程中，调用的接口均变成调用两次，找了一天才找到原因
uniapp uni.requet()二次封装ts版
我总是词不达意的博客
07-04 1498
uni.request请求的二次封装
uniapp的请求二次封装
qq_64209130的博客
08-17 1687
uniapp中需要经常性的发出请求,如果直接使用uni.request的话代码过于繁琐,不便于后期的维护就对uni.request进行二次封装。
uni-app实战项目.zip
09-11
在当今移动互联网时代，跨平台开发成为了开发者们追求的目标，而uni-app就是一款强大的跨平台开发框架，它基于Vue.js，可以实现一次编写，多端运行，覆盖了iOS、Android、H5、微信小程序、支付宝小程序等多个平台。...
my-uni-ui-ok.rar
05-21
而在"my-uni-ui"模板中，可能已经对uni.request进行了二次封装，以简化调用，优化错误处理，或者实现统一的请求配置，如设置默认的Header、超时时间等。这种封装可以提高代码复用率，减少重复工作，并提升开发效率。...
uniapp组件封装请求封装
03-18
通常，我们会将axios或uni-request等网络请求库进行二次封装，创建一个自定义的服务层，如`apiService`。在这个服务层中，我们可以定义一系列的接口，比如获取数据的`getData()`、发送POST请求的`postData()`等，...
JavaScript基于uni-app的菜谱app源码.zip
05-06
uni-app是由DCloud（即海马云）开发的一款多端开发框架，其核心理念是“写一次代码，到处运行”。它基于Vue.js，并扩展了大量移动设备特性的API，让开发者可以使用Vue语法进行移动应用开发。uni-app支持微信小程序、...
uni-app请求头中携带token
热门推荐
qq_45959912的博客
01-28 2万+
之前做一个前后端分离项目是，用axios进行交互，访问一些有权限的页面时，需要在请求头中携带token值，在uniapp用uni.request发送请求时我发现浏览器中请求头中并没有携带token，有些有权限的页面也无法加载出来。 也找了很多解决方法，基本都是大同小异，发现和我的不太一样，于是就自己弄了一个 首先： 在登陆成功之后，需要把token保存到本地 然后新建一个request.js文件 我是这样配置的 const BASE_URL = 'http://127.0.0.1:8088'//接口地址
uniapp微信小程序-请求二次封装（直接可用）
apple_70049717的博客
01-26 4014
当需要添加新的功能、处理错误或者进行性能优化时，只需修改封装的请求逻辑而无需深入到每个组件或页面中。：通过封装请求，你可以在整个项目中重用相同的请求逻辑。这样一来，如果 API 发生变化或者需要进行优化，你只需在一个地方修改代码，而不是在每个使用这个请求的地方都进行修改。：封装的请求可以统一处理错误，提高了错误处理的一致性。你可以在请求拦截器中处理一些通用的错误，例如网络错误、权限问题等，使代码更加健壮。：通过封装，可以在一个地方统一配置请求的一些参数，例如基本路径、请求超时时间、请求头等。
uniapp二次封装请求
ZH_brave的博客
10-12 487
uniapp封装请求，uniapp请求二次封装
uniapp二次封装request API
weixin_45797900的博客
08-29 574
uniapp网络请求二次封装，使用。
uniapp请求request封装时统一处理token过期的解决方案
learn_daydayUp的博客
04-12 6511
uniapp的request封装时，token过期的统一处理的解决方案
封装api时候token的处理
qq_59076775的博客
06-21 1568
关于token的处理
uniapp请求方法二次封装
weixin_56651537的博客
07-12 485
这个二次封装的基本内容，响应拦截器和请求拦截器中需要添加什么根据项目需求定。
uni.request二次封装
09-08
CSDN 开发的 ChatGPT 没有关系。以下是一个简单的示例代码，展示了如何对 uni.request 函数进行二次封装： ```javascript // 封装后的请求函数 function myRequest(url, method, data) { return new Promise((resolve, reject) => { uni.request({ url: url, method: method, data: data, success: function(res) { // 请求成功时，返回响应结果 resolve(res.data); }, fail: function(err) { // 请求失败时，返回错误信息 reject(err); } }); }); } // 使用封装后的请求函数发送 GET 请求 async function sendGetRequest() { try { const url = "https://api.example.com/data"; const method = "GET"; const response = await myRequest(url, method); // 处理响应结果 console.log(response); } catch (error) { // 处理错误信息 console.error(error); } } // 使用封装后的请求函数发送 POST 请求 async function sendPostRequest() { try { const url = "https://api.example.com/data"; const method = "POST"; const data = { key: "value" }; const response = await myRequest(url, method, data); // 处理响应结果 console.log(response); } catch (error) { // 处理错误信息 console.error(error); } } ``` 在上面的代码中，通过创建一个名为 `myRequest` 的函数来封装 `uni.request` 函数。这个封装函数返回一个 Promise 对象，允许使用 `async/await` 语法来处理异步请求。通过传入不同的 URL、请求方法和数据，可以发送 GET 或者 POST 请求。 请注意，封装函数中的成功回调函数使用 `resolve` 返回响应结果，失败回调函数使用 `reject` 返回错误信息。在调用封装函数时，使用 `try/catch` 块来捕获并处理可能出现的错误。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值