位置: 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什么意思)

  • 魅族18s屏幕尺寸(魅族18s屏幕多大)

    魅族18s屏幕尺寸(魅族18s屏幕多大)

  • 小米蓝牙耳机左右不能同时配对(小米蓝牙耳机左边的连不上)

    小米蓝牙耳机左右不能同时配对(小米蓝牙耳机左边的连不上)

  • 小米10微信新版本怎么切换深色模式(小米10微信最新版本)

    小米10微信新版本怎么切换深色模式(小米10微信最新版本)

  • 怎么增加抖音音浪(抖音如何增加音效)

    怎么增加抖音音浪(抖音如何增加音效)

  • oppo reno4和reno3的区别(oppo reno4和reno3哪个性价比高)

    oppo reno4和reno3的区别(oppo reno4和reno3哪个性价比高)

  • 来电提醒功能怎么关闭(来电提醒功能怎么关闭OPPO)

    来电提醒功能怎么关闭(来电提醒功能怎么关闭OPPO)

  • 企业店铺比c店流量大吗(企业店铺会比c店流量多吗)

    企业店铺比c店流量大吗(企业店铺会比c店流量多吗)

  • 扣扣拉黑后对方知道吗(扣扣拉黑后对方发信息显示什么)

    扣扣拉黑后对方知道吗(扣扣拉黑后对方发信息显示什么)

  • 抖音里可能认识的人是什么意思(抖音里可能认识的人是怎么推荐的)

    抖音里可能认识的人是什么意思(抖音里可能认识的人是怎么推荐的)

  • 微信删除的聊天图片在哪里可以找到(微信删除的聊天记录怎么找回免费软件)

    微信删除的聊天图片在哪里可以找到(微信删除的聊天记录怎么找回免费软件)

  • 平板第一次充电要等电用完才能充吗(平板第一次充电没充满有影响吗)

    平板第一次充电要等电用完才能充吗(平板第一次充电没充满有影响吗)

  • 华为手机相机黑屏闪退(华为手机相机黑白色怎么调回来)

    华为手机相机黑屏闪退(华为手机相机黑白色怎么调回来)

  • 苹果8发热怎么回事(苹果8发热怎么样)

    苹果8发热怎么回事(苹果8发热怎么样)

  • 小米笔记本风扇声音大(小米笔记本风扇转速怎么调节)

    小米笔记本风扇声音大(小米笔记本风扇转速怎么调节)

  • 微信聊天记录多长时间过期(微信聊天记录多久自动删除)

    微信聊天记录多长时间过期(微信聊天记录多久自动删除)

  • 陌陌号注销了可以重新注册吗(陌陌号注销了可以马上注册吗)

    陌陌号注销了可以重新注册吗(陌陌号注销了可以马上注册吗)

  • oppor15梦境版什么时候上市(OPPOr15梦境版什么颜色最好看)

    oppor15梦境版什么时候上市(OPPOr15梦境版什么颜色最好看)

  • OPPO k5超清夜景模式怎么开启(oppo k9夜景)

    OPPO k5超清夜景模式怎么开启(oppo k9夜景)

  • 蓝牙耳机对大脑有影响吗(蓝牙耳机对大脑有辐射吗)

    蓝牙耳机对大脑有影响吗(蓝牙耳机对大脑有辐射吗)

  • 怎么关掉电脑pin(怎么关掉电脑屏保出现的广告)

    怎么关掉电脑pin(怎么关掉电脑屏保出现的广告)

  • 计算机二级word知识点(计算机二级word是哪个版本)

    计算机二级word知识点(计算机二级word是哪个版本)

  • 抖音怎么弄备忘录(抖音怎么弄备忘录音频)

    抖音怎么弄备忘录(抖音怎么弄备忘录音频)

  • pccmoo是什么型号(pckmoo是什么型号)

    pccmoo是什么型号(pckmoo是什么型号)

  • 安卓星手机智能控车系统(安卓智能设备指什么)

    安卓星手机智能控车系统(安卓智能设备指什么)

  • 网上购电后需要插卡吗(网上购电后需要缴费吗)

    网上购电后需要插卡吗(网上购电后需要缴费吗)

  • Win10四月更新“灾难性”大翻车(windows4月更新)

    Win10四月更新“灾难性”大翻车(windows4月更新)

  • 九斑蛾,瑞士 (© Thomas Marent/Minden Pictures)

    九斑蛾,瑞士 (© Thomas Marent/Minden Pictures)

  • 小规模企业所得税计算
  • 农产品收购发票使用范围
  • 出售技术所有权的会计分录
  • 发票上的金额是什么字体
  • 年报中的工会经费是什么
  • 开咨询费需要合同吗
  • 电子发票打小了可以报销吗
  • 没有社保的临时工值得干吗
  • 房地产企业汇算清缴
  • 住房公积金的会计处理
  • 个税退税入账
  • 免抵退税额账务处理流程
  • 计提摊销房租会计分录
  • 固定资产处理申请
  • 没签合同怎么交社保
  • 出口企业是外贸企业吗
  • 新注册成立的公司可以往前补交社保吗
  • 进项发票可以不入账吗
  • 税务局申请发票
  • 个体工商户税收怎么算
  • 规范合同签订的重要性
  • 准则大家学第十二集
  • 一张抵扣发票能分多次抵扣不
  • 青苗补偿 税
  • 不动产处置流程
  • 银行转账取得的收据
  • 租房合同开发票的金额要和合同一致吗
  • 二手电脑怎么激活windows10
  • 软件存在的意义
  • deepin如何
  • PHP:xml_set_end_namespace_decl_handler()的用法_XML解析器函数
  • Win11错误提示"the pc must support secure boot"怎么解决
  • ghost windows10安装教程
  • 以前年度损益科目代码
  • vue3.0用法
  • 科目余额表怎么导出
  • 员工多交的个人社保
  • 遍历enumeration
  • 上年第4季度企业所得税
  • 企业办理工程价款流程
  • 自建厂房转固定资产如何办理手续
  • python对应位置相乘
  • 一字节的范围
  • 增值税出口免税不退税
  • 销货清单要放凭证里吗
  • 企业工会经费计提比例
  • 日记总账的适用范围
  • 关联方交易的税收问题
  • 企业所得税不能税前扣除项目
  • 低值易耗品怎么摊
  • 出租周转材料的租金会计科目
  • 发票联遗失的证明怎么开
  • 促销服务属于什么服务按什么征增值税
  • 非关联企业之间可以借款吗
  • 买公司的钱计入什么科目
  • 贴发票要按时间顺序吗
  • vhd 打开
  • 清除coms密码
  • 应用商店windows
  • windowsxp开机启动项在哪里设置
  • win7怎么删除操作中心
  • win10正版免费升级
  • linux与windows有哪些主要区别
  • windows boot.ini文件
  • win10的outlook在哪
  • win7旗舰版u盘在电脑上读不出来
  • es6展开符
  • js动态表单
  • unity3d特效教程
  • javascript unicode与GBK2312(中文)编码转换方法
  • cmd读取d盘
  • linux守护进程管理
  • javascript高级程序设计第五版 pdf下载
  • 用yum安装samba
  • js判断浏览器内核和版本
  • 燃气号如何查询
  • 广东税务人工服务
  • 网上税务局电子发票怎么领用
  • 国家税务总局公告2017年第21号
  • 四川 国税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设