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)


    请求拦截器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状态进入catch
		if (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 VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'

// 引入 store 
import store from '@/store/index.js'
Vue.prototype.$store = store

const app = new Vue({
    ...App,
	store
})

// 引入全局uView
import uView from './uni_modules/uview-ui'
Vue.use(uView)

// 引入请求封装,将app参数传递到配置中
require('./common/http.interceptor.js')(app)

app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}
// #endif

2.3 页面中引入请求方法并使用

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

    示例页面截图:
uview2.0封装http请求实战以及常见请求传参实录

    页面内容:

<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.toymoban.com/news/detail-425306.html

到了这里,关于uview2.0封装http请求实战以及常见请求传参实录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HTTP 请求和响应的原理以及常见问题、解决办法

    在现代 Web 开发中,HTTP 请求和响应是最基本的通信方式。这两者是通过 HTTP 协议进行交互的,在前端和后台开发中都需要对其处理有一定的了解。我将为大家介绍 HTTP 请求和响应的处理原理以及常见问题和解决办法。 客户端向服务器发送请求,请求格式如下: 服务器接收到

    2024年02月10日
    浏览(41)
  • uview2.0自定义tabbar

    pages.json 样式覆盖 App.vue 消息设置角标 在三个主页面分别引入组件 传入对于的索引即可

    2024年02月11日
    浏览(41)
  • 【uview2.0】Keyboard 键盘 与 CodeInput 验证码输入 结合使用 uview

    https://www.uviewui.com/components/codeInput.html (CodeInput 验证码输入) https://www.uviewui.com/components/keyboard.html (Keyboard 键盘) css

    2024年02月01日
    浏览(43)
  • uview2.0 【uniapp】购物车样式

    2024年01月18日
    浏览(44)
  • uniapp+uView2.0实现自定义动态tabbar

         1.需求说明      2.实现原理说明      3.实现过程          3.1集成uView2.0          3.2 自定义tabbar          3.3 vuex定义tabbar共享信息          3.4 tabbar显示个数控制      要求不同时间显示不同的tabbar.点击不同的tabbar跳转到不同的页面,能随时实现tabb

    2023年04月18日
    浏览(41)
  • uniapp+uview2.0+vuex实现自定义tabbar组件

    效果图 1.在components文件夹中新建MyTabbar组件 2.组件代码 3.父组件 4.创建store目录,下面创建index.js文件

    2024年02月04日
    浏览(49)
  • 【RuoYi移动端】uniApp导入和引用uView2.0插件

    安装 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 uView UI,是 uni-app 生态最优秀的 UI 框架,全面的组件和便捷的工具会让您信手拈来,如鱼得水 https://uviewui.com/components/install.html  也可直接点击以下下载地址: uView2.0重磅发布,利剑出鞘,一统江湖 - DCloud 插件市

    2024年02月11日
    浏览(52)
  • uView2.0 ScrollList 横向滚动列表微信小程序不滚动问题

    1.1 template 1.2 style(scss) 1.3 问题截图 2.1 解决办法 在 u-scroll-list 内部只放一个盒子,盒子内部包裹横向滚动列表项,并且盒子设置 display:flex; 2.2 template 2.3 style(scss) 2.4 解决截图

    2024年02月11日
    浏览(49)
  • Java http GET POST 请求传参

    HTTP POST请求传参方式 方式一: 方式二 HTTP GET请求传参方式

    2024年02月15日
    浏览(47)
  • 小程序request三层封装和分包以及路由和组件传参

    工程化的概念 工程化API封装 【重点】30% 工程化组件封装 【重点】30% 小程序路由【重点】30% 上架 小程序分包【重点】10% 在开发小程序时,需要将自己的代码进行封装,命名要规范,位置要规范,以达到代码复用,可以大量生产的效果 对 wx.request() 发请求的API进行三层封装

    2024年02月14日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包