位置: IT常识 - 正文

uview2.0封装http请求实战以及常见请求传参实录

编辑:rootadmin
uview2.0封装http请求实战以及常见请求传参实录

推荐整理分享uview2.0封装http请求实战以及常见请求传参实录,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

     1.前言      2.使用步骤          2.1 配置请求拦截器以及api集中管理配置          2.2 main.js中进行引入请求拦截器          2.3 页面中引入请求方法并使用

1.前言

    uview2.0是uniapp开发中使用频率相对来讲比较高的一款框架,今天从实战角度介绍一下关于http请求uview是如何进行封装.     该插件支持post、get、put和delete,以及上传下载等请求,有如下特点:

基于Promise对象实现更简单的request使用方式,支持请求和响应拦截 支持全局挂载 支持多个全局配置实例 支持自定义验证器 支持文件上传/下载 支持task 操作 支持自定义参数 支持多拦截器 对参数的处理比uni.request更强

2.使用步骤2.1 配置请求拦截器以及api集中管理配置

    这两个文件夹都返回在项目根目录下的common文件夹下. api集中管理配置http.api.js内容:

const http = uni.$u.http// 根据wx.login获取的code获取小程序openID(get请求路径传参,不传递token)export const getOpenId = (data) => http.get('/user/getOpenId', data)// 注意:如果get请求中没有请求参数可以省略data,具体方法中也不用传递参数;// 根据wx.login获取的code获取小程序openID(get请求路径传参,传递token)export const getOpenIdByToken = (data,config = {}) => http.get('/user/getOpenId', data,config)// post请求,用户登录(post请求请求体传参不传递token)export const login = (params, config = {}) => http.post('/user/login', params, config)// post请求,传递内容(post请求请求路径传参传递token)export const throwBottle = (params, config = {}) => http.post('/drift/send?content='+params.content,params, config)uview2.0封装http请求实战以及常见请求传参实录

    请求拦截器http.interceptor.js内容:

// 此vm参数为页面的实例,可以通过它引用vuex中的变量module.exports = (vm) => { // 初始化请求配置 uni.$u.http.setConfig((config) => { /* config 为默认全局配置*/ config.baseURL = 'http://127.0.0.1:8080'; /* 根域名 */ return config })// 请求拦截uni.$u.http.interceptors.request.use((config) => { //根据custom参数中配置的是否需要token,添加对应的请求头if(config?.custom?.auth) {// 本处使用的是获取缓存中的token信息,也可以在此通过vm引用vuex中的变量,具体值在vm.$store.state中config.header.token = uni.getStorageSync("token")} return config }, config => { // 可使用async await 做异步操作 return Promise.reject(config)})uni.$u.http.interceptors.response.use((response) => {/* 对响应成功做点什么 可使用async await 做异步操作*/if (response.data.code !== 200) { // 服务端返回的状态码不等于200,则reject() return Promise.reject(response)} // return Promise.reject 可使promise状态进入catchif (response.config.custom.verification) { // 演示自定义参数的作用 return response.data}return response}, (response) => {/* 对响应错误做点什么 (statusCode !== 200)*/console.log(response)return Promise.reject(response)})}2.2 main.js中进行引入请求拦截器

    main.js内容:

import App from './App'// #ifndef VUE3import Vue from 'vue'Vue.config.productionTip = falseApp.mpType = 'app'// 引入 store import store from '@/store/index.js'Vue.prototype.$store = storeconst app = new Vue({ ...App,store})// 引入全局uViewimport uView from './uni_modules/uview-ui'Vue.use(uView)// 引入请求封装,将app参数传递到配置中require('./common/http.interceptor.js')(app)app.$mount()// #endif// #ifdef VUE3import { createSSRApp } from 'vue'export function createApp() { const app = createSSRApp(App) return { app }}// #endif2.3 页面中引入请求方法并使用

    以下demo中将常用的请求方式进行了分类,并添加了是否传递token的传参方式. post请求体传参(不传递token) post请求路径传参(传递token) get请求路径传参(不传递token) get请求路径传参(传递token)

    示例页面截图:

    页面内容:

<template><view><view>消息页面</view><!-- 发送请求 --><view><button type="primary" @click="method1()">post请求体传参(不含token)</button></view><view><button type="primary" @click="method2()">post路径传参(含token)</button></view><view><button type="primary" @click="method3()">get请求路径传参(不含token)</button></view><view><button type="primary" @click="method4()">get请求路径传参(含token)</button></view></view></template><script>import {login,send,getOpenId,getOpenIdByToken} from '../../common/http.api.js';export default {data() {},methods:{method1(){this.serverLogin()},method2(){this.serverSend("478")},method3(){this.serverOpenId("123")},method4(){this.serverOpenIdByToken("456")},serverSend(content) {send({'content': content},{'custom': { 'auth': true }}).then(response => {console.log("发送信息:" + JSON.stringify(response))}).catch((data) => {console.log("发送消息失败:" + JSON.stringify(data))uni.showToast({title: "网络不给力,请稍后再试!"})})},serverLogin() {login({"loginType": 1,"openId": "123"}).then(response => {console.log("登录信息:"+JSON.stringify(response))uni.setStorageSync('token',response.data.data.token)}).catch((data) => {console.log("登录失败:" + JSON.stringify(data))uni.showToast({title: "网络不给力,请稍后再试!"})})},serverOpenIdByToken(jsCode){getOpenId({data:{"jsCode":jsCode},'custom': { 'auth': true }}).then(response => {console.log("openId信息:"+JSON.stringify(response))}).catch((data) => {console.log("openId信息获取失败:" + JSON.stringify(data))uni.showToast({title: "网络不给力,请稍后再试!"})})},serverOpenId(jsCode){getOpenId({data:{"jsCode":jsCode}}).then(response => {console.log("openId信息:"+JSON.stringify(response))}).catch((data) => {console.log("openId信息获取失败:" + JSON.stringify(data))uni.showToast({title: "网络不给力,请稍后再试!"})})}}}</script><style lang="scss">.u-page__item__slot-icon{width: 50rpx;height:50rpx;}</style>

补充:使用post请求进行无参的退出操作(注意要传递一个空对象): api.js:

export const logout = (params,config = {}) => http.post('/logout',params, config)

页面:

logout({},{'custom': { 'auth': true }}).then(response => {// 退出操作逻辑}).catch((data) => {console.log("用户退出失败:" + JSON.stringify(data))uni.showToast({title: data.data.msg,icon : 'none'})})

    以上是使用uview2.0封装http请求的处理过程记录,如果感觉有所帮助欢迎评论区留言点赞或是收藏!     官方地址链接:https://www.uviewui.com/js/http.html

本文链接地址:https://www.jiuchutong.com/zhishi/281005.html 转载请保留说明!

上一篇:土豆发芽了能吃吗?慎吃发了芽的土豆(土豆发芽了能吃吗有没有毒)

下一篇:ashserv.exe是什么进程 安全吗 ashserv进程有什么作用(assoc.exe=exefile什么意思)

  • 百望税控软件下载
  • 制造业怎么核算成本
  • 发票勾选错了已报税怎么办
  • 上年数为负数,今年数为正数怎么算增减比率
  • 应付职工薪酬包括哪些内容
  • 月末结转各项费用支出479000
  • 个体户查账征收怎么交税?
  • 资本公积是啥
  • 招待费的增值税专用发票可以抵扣吗
  • 债券溢价摊销额计算公式
  • 收到利息计入哪个会计科目
  • 房屋出售缴纳税种
  • 个人如何开劳务费怎么开
  • 企业所得税弥补亏损明细表怎么填写
  • 企业所得税一般是多少
  • 装修费属于劳务费吗
  • 对公账户钱怎么退回去
  • 购入材料的应付账款包括商业折扣吗
  • 上年度的费用今年开票分录
  • 公司缴纳的社保离职后自己可以缴纳社保
  • 景区门票 报销
  • 当月没有进项税额抵扣怎么办
  • 增值税发票和收据的区别
  • 采购医药费差价会计分录
  • 往来账乱如何处理
  • PHP:xml_set_processing_instruction_handler()的用法_XML解析器函数
  • 汇算清缴是哪个报表
  • Win11怎么设置屏幕熄灭时间
  • 短缺的材料算不算入账价值
  • 最小的电视棒是多少寸
  • 在我国,企业可以用税前利润弥补几年内的损失
  • 微信小程序使用记录删除
  • 新准则规定
  • 公司处理固定资产车辆怎么开发票
  • 大学生网页设计大赛
  • element ui vue 3
  • 一般纳税人预收租金增值税
  • 电子承兑转出需要授权吗
  • 银行开的手续费发票开错了
  • 包装就是包装物
  • 材料成本差异的会计分录
  • 小规模企业申报表填写
  • 企业商品报废如何处置
  • 应付职工薪酬如何结转
  • 销售费用主要账户包括
  • 免抵税额要交税吗
  • 软件开发的账务处理
  • 产房日常维修费用
  • 购入不需要安装的固定资产会计科目
  • 直接人工成本包括管理人员开的工资吗
  • 取得虚开
  • 投资性房地产收回自用
  • 预包装食品是否可以称重销售吗
  • 政府补助收入是指县级以上工会收到的
  • 小规模纳税人应纳增值税额的计算
  • mysql优化sql有哪些
  • 修改window
  • win7旗舰版关闭强制签名
  • 如何恢复ubuntu
  • win7如何打开命令窗口
  • win8垃圾清理
  • win7能玩的老游戏
  • linux执行sh文件报错找不到
  • unity3d地图定位
  • 彻底弄懂js中的this指向
  • jquery easy ui
  • Android中SQLite数据库的使用
  • 使用vue-cli快速搭建vue项目
  • 我写的书日语
  • JavaScript中的数据类型分为两大类
  • 能用python做什么
  • 新手入门常用代词有哪些
  • js常用方法总结
  • jquery里面的$是什么意思
  • 变更税务局三方协议
  • 在地税局工作是什么编制
  • 店面转让,房租怎么交税
  • 13%增值税发票怎么抵扣
  • 广州天河东路税务局地址
  • 上海金山国税局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设