uni-app使用uniCloud时做类似于拦截器和请求结果再处理(类似于请求和响应拦截)

代码哈士奇 等级 613 1 0

想要在使用uniCloud的使用拦截请求怎么办 再次封装uniCloud.callFunction 特别说明 这里的token是我自己存储成token 如果你使用了uni-id 官方的推荐是 ('uni_id_token') ('uni_id_token_expired') 存储了uni_id_token后请求会自动携带 这里的res.result.code==0是因为我的云函数请求成功返回的code均为0 如果你的不是 就根据自己需求更改

正常情况下 我们使用uniCloud.callFunction

uniCloud.callFunction({
    name: 'xxx'
})

结合uni-id后请求时需要携带token 或者需要携带一些认证参数怎么办呢 总不能一个一个的写吧 那太麻烦了

我们对他进行一次封装

根目录下新建一个目录 根据需求命名 新建index.js文件

@TOC

通用请求

当请求为0(根据需求调整)的时候请求成功 否则只返回相应的code(也可以返回msg等)

封装

const req = (funName,params)=>{
    const token = uni.getStorageSync('xxxx')
    if(!token){
        //没有token 跳转登陆
    }
    return new Promise((resolve)=>{
        uniCloud.callFunction({
            name:funName,
            data:{
                params
            },
            success:res=>{
                if(res.result.code==0){
                    resolve(res.result)
                }else{
                    resolve(res.result.code)
                }
            },
            fail:()=>{
                resolve(false)
            }
        })
    })
}

module.exports = {
    req
}

调用

在main.js中

import Vue from 'vue'
import App from './App'
import reqFun from './reqFun/index.js'

Vue.prototype.$reqFun = reqFun

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

在需要调用的地方

test() {
    this.$reqFun.req(funName, params).then(res => {

    })
}

登陆注册

const loginOrRegister = (params)=>{
    return new Promise((resolve)=>{
        uniCloud.callFunction({
            name:'login/register',
            data:{
                params
            },
            success:res=>{
                if(res.result.code==0){
                    resolve(res.result)
                }else{
                    resolve(res.result.code)
                }
            },
            fail:()=>{
                resolve(false)
            }
        })
    })
}

整个文件

const req = (funName,params)=>{
    const token = uni.getStorageSync('xxxx')
    if(!token){
        //没有token 跳转登陆
    }
    return new Promise((resolve)=>{
        uniCloud.callFunction({
            name:funName,
            data:{
                params
            },
            success:res=>{
                if(res.result.code==0){
                    resolve(res.result)
                }else{
                    resolve(res.result.code)
                }
            },
            fail:()=>{
                resolve(false)
            }
        })
    })
}

const loginOrRegister = (params)=>{
    return new Promise((resolve)=>{
        uniCloud.callFunction({
            name:'login/register',
            data:{
                params
            },
            success:res=>{
                if(res.result.code==0){
                    resolve(res.result)
                }else{
                    resolve(res.result.code)
                }
            },
            fail:()=>{
                resolve(false)
            }
        })
    })
}


module.exports = {
    req,
    loginOrRegister
}

调用方法和通用调用一样






欢迎加入交流群 974178910 535620886

  大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!博客主页:https://blog.csdn.net/qq_42027681

未经本人允许,禁止转载

uni-app使用uniCloud时做类似于拦截器和请求结果再处理(类似于请求和响应拦截)

收藏
评论区

相关推荐

当遇到跨域开发时, 我们如何处理好前后端配置和请求库封装(koa/axios版)
我们知道很多大型项目都或多或少的采用跨域的模式开发, 以达到服务和资源的解耦和高效利用. 在大前端盛行的今天更为如此, 前端工程师可以通过nodejs或者Nginx轻松搭建起web服务器.这个时候我们只需要请求后端服务器的接口即可实现系统的业务功能开发.这个过程中会涉及到web页面向API服务器的跨域访问(由于受到浏览器的同源策略,但是业界已有很多解决方案,
计算机网络
一、HTTP 1.1  请求和响应报文 开始⾏,⽤于区分是请求报⽂还是响应报⽂。在请求报⽂中的开始⾏叫做请求⾏(Request Line)
Http请求头和请求响应头大全
HTTP响应头和请求头信息对照表 HTTP请求头提供了关于请求,响应或者其他的发送实体的信息。HTTP的头信息包括通用头、请求头、响应头和实体头四个部分。每个头域由一个域名,冒号(:)和域值三部分组成。 通用头标:即可用于请求,也可用于响应,是作为一个整体而不是特定资源与事务相关联。 请求头标:允许客户端传递
uni-app使用uniCloud时做类似于拦截器和请求结果再处理(类似于请求和响应拦截)
想要在使用uniCloud的使用拦截请求怎么办 再次封装uniCloud.callFunction特别说明 这里的token是我自己存储成token 如果你使用了uniid官方的推荐是 ('uniidtoken') ('uniidtokenexpired') 存储了uniidtoken后请求会自动携带 这里的res.result.code0是因为我的云
uni-app/vue 结合element ui实现菜单分类导航(类似于小米商城首页的分类导航那种)
效果如下 数据来源为uniCloud云数据库 照片来源为网络 代码来源为我的毕业设计 在这里插入图片描述(https://imghelloworld.osscnbeijing.aliyuncs.com/68857ab4a9c485bbbd98c94ad98fb490.png) 鼠标未放到软件上面之前 在这里插入图片描述(ht
js-Answers二
前端框架相关 什么是单页面应用(SPA)? 单页面应用(SPA)是指用户在浏览器加载单一的HTML页面,后续请求都无需再离开此页 目标:旨在用为用户提供了更接近本地移动APP或桌面应用程序的体验。 流程:第一次请求时,将导航页传输到客户端,其余请求通过 REST API 获取 JSON 数据 实现:数据的传输通过
VUE3(七)vue项目抽离.vue文件中的js、css代码
平常再做开发的时候,一般情况下不会将html,js,css代码写到一个文件中。基本上都会写在各自对应的文件中,然后再引入即可。那么在VUE中我们如何抽离vue文件中的js,与css代码呢? 1:抽离javascriptHome.vue<template <div <div :style"{ padding: '24px', back
uni-app云开发教程全套课程开始啦~
由于前段时间过于繁忙,博客更新较慢为了更好的分享uniapp的学习以及uniCloud,uidid的学习使用在B站推出全套课程 免费哦课程资源地址为或者一起学习交流吧
自动化办公 | 批量将Excel中的url链接转成图片
大家好,我是小五🚀最近在交流群看到了一个问题小五对这个比较感兴趣,所以就要了示例数据找时间尝试做了一下。为啥感兴趣呢?因为前段时间刚帮群友做过一个相反的案例——。需求简介具体原始数据和期望结果如下图所示:同时还有两点要求思考了一下,我选择了一个折中的办法,先依照B列的url链接将图片下载到本地,再将本地图片依次插入B列的原位置。这次小五选择使用python,
「uniapp」封装请求拦截和响应拦截
uniapp官方的请求方式首先我们先看一下uni官方给开发者提供的uni.request用来网络请求的apiuni.request( url: '', method: 'GET', data: , header:, success: res , fail: () , complete: () );可以看到我们每次请求数据的时候都需要按照这个格式来请求,
2分钟做一个Vue实时直播系统
前言我们在不敲代码的时候可能会去看游戏直播,那么是前台怎么实现的呢?下面我们来讲一下。第一步,购买云直播服务首先,你必须去阿里云或者腾讯云注册一个直播服务。也花不了几个钱,练手的话,几十块钱就够了。这里我拿阿里云举例,购买完了,配置好推流域名跟播流域名,下面我们将进行地址生成。记住下面生成的地址,下面会用到。第二步,下载本地推流工具https://obspr
太强了,用Python+Excel制作天气预报表!
大家好,我是小F~ 今天给大家介绍一个Python+Excel的实战项目,非常有趣。 主要使用xlwings和requests这两个Python库,以及Office的Excel。 xlwings处理表格,requests则是请求数据。 先从Excel中获取城市信息,然后请求接口,获取到天气信息,再返回给Excel。 具体操作可以看下图~
Label中同时有text和image时,需要compound来控制
程序可以为按钮或 Label 等组件同时指定 text 和 image 两个选项,其中 text 用于指定该组件上的文本;image 用于显示该组件上的图片,当同时指定这两个选项时,通常 image 会覆盖 text。但在某些时候,程序希望该组件能同时显示文木和图片,此时就需要通过 compound 选项进行控制。compound 选项支持如下属性值:Non
浅谈Python两大爬虫库——urllib库和requests库区别
一、前言在使用Python爬虫时,需要模拟发起网络请求,主要用到的库有requests库和python内置的urllib库,一般建议使用requests,它是对urllib的再次封装。那它们两者有什么区别 ?下面通过案例详细的讲解 ,了解他们使用的主要区别。 二、urllib库 简介:urllib库的response对象是先创建http,request对象
面试官嘲笑我,这你都不会?
01 背景大家好,我是阿沐!你的收获便是我的喜欢,你的点赞便是对我的认可。多年前刚毕业出来工作的时候,那个时候刚毕业对缓存的使用基本上可以说很少涉及,在大学做课件设计或者小型项目也都是用不到缓存,再者说了我大学是做嵌入式写汇编语言和c语言的。当时出实习去找工作并不顺利,面试官问了知道redis和memcached区别嘛?额,我当时虽然也做了一些功课,就是恶补