• uniapp 封装request请求


    在request 文件夹 新建request.js

    import main from "main.js"
    
    
    
    export const request = (options) => {
    
    	return new Promise((resolve, reject) => {
    		let token = uni.getStorageSync('token')
    		options.header.Authorization = token
    
    		uni.request({
    			url: main.baseUrl + options.url,
    			data: options.data || {},
    			method: options.method || 'POST',
    			header: options.header,
    			success: (res) => {
    				if (res.data.code == 401) { //刷新token
    					if (uni.getStorageSync("userData") == null || uni.getStorageSync(
    							"userData") == "") { //没有用户登录信息
    						uni.reLaunch({
    							//保留当前页面,跳转到应用内的某个页面
    							url: '/pages/login/login'
    						})
    					} else {
    						uni.request({
    							url: main.baseUrl + '/user/login',
    							data: {
    								username:"123456",
    								password:"123456"
    							},
    							header: {
    								'content-type': 'application/x-www-form-urlencoded',
    							},
    							method: 'post',
    							success: (res) => {
    								if (res.data.code == 200) {
    									uni.setStorageSync("token", res.data.msg)
    
    									//重新之前的发送请求
    									options.header.Authorization = uni
    										.getStorageSync('token')
    									uni.request({
    										url: main.baseUrl + options.url,
    										data: options.data || {},
    										method: options.method || 'POST',
    										header: options.header,
    										success: (res) => {
    											resolve(res.data)
    										}
    									})
    								}
    							}
    						})
    					}
    				} else {
    					// console.log(res.data); // 控制台显示数据信息
    					resolve(res.data)
    				}
    
    			},
    			fail: (err) => {
    				// 页面中弹框显示失败
    
    				uni.showToast({
    					title: "请检查网络连接",
    					icon: 'none',
    					duration: 1000
    				})
    				// 返回错误消息
    				reject(err)
    			},
    			catch: (e) => {
    				console.log(e);
    			}
    		})
    	})
    }
    // 将对象导出外部引入使用
    export default {
    	request
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81

    在main.js 下添加

    //接口请求
    export default {
    	baseUrl: "http://192.168.0.18:8081"
    }
    
    
    • 1
    • 2
    • 3
    • 4
    • 5

    页面中引用

    	import request from "@/request/request.js"
    
    • 1

    绑定事件调用接口

    	getcodes() {
    				request.request({
    					url: '/getPhoneCode',
    					data: {
    						username: this.username
    					},
    					header: {
    						'content-type': 'application/x-www-form-urlencoded'
    					},
    					method: 'post',
    				}).then(res => {
    					console.log("------res------", res)
    				})
    			}
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
  • 相关阅读:
    【华为OD机考B卷 | 100分】统计监控、需要打开多少监控器(JAVA题解——也许是全网最详)
    Linux基础篇之文件权限问题讲解
    保险智能理赔-医疗票据OCR识别解决方案
    如何在.net6webapi中记录每次接口请求的日志
    Android动态更换图标
    单例模式只会懒汉饿汉?读完本篇让你面试疯狂加分
    std::bind 源码分析
    【pytest】html报告修改和汉化
    Centos7网络配置
    【计算机视觉 05】YOLO论文讲解:V1-V7
  • 原文地址:https://blog.csdn.net/moerduo0/article/details/132908402