uview2.0封装http请求实战以及常见请求传参实录
创始人
2024-06-02 09:54:56
0

     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状态进入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 VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'// 引入 store 
import store from '@/store/index.js'
Vue.prototype.$store = storeconst 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请求的处理过程记录,如果感觉有所帮助欢迎评论区留言点赞或是收藏!
    官方地址链接:https://www.uviewui.com/js/http.html

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
一帆风顺二龙腾飞三阳开泰祝福语... 本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语,以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...