当前位置:网站首页>Uniapp request request encapsulation method
Uniapp request request encapsulation method
2022-07-18 20:53:00 【Life goes on and battles go on】
Packaging method 1
1. newly build request.js

const baseUrl = "http://localhost:6645"
const request = (url = '', date = {}, type = 'POST', header = {
'content-type': 'application/x-www-form-urlencoded'
}) => {
return new Promise((resolve, reject) => {
uni.request({
method: type,
url: baseUrl + url,
data: date,
header: header,
dataType: 'json',
}).then((response) => {
setTimeout(function() {
uni.hideLoading();
}, 200);
let [error, res] = response;
resolve(res.data);
}).catch(error => {
let [err, res] = error;
reject(err)
})
});
}
export default request2. stay main.js Global registration in
import request from "api/request.js"
Vue.prototype.$request = request
3. It is called in the page
this.$request('/recruit/getAll', {
// Parameter name : Parameter values , without , You don't need to pass
}).then(res => {
// Print call successful callback
console.log(res)
})4. The effect is as follows

Advantages and disadvantages
advantage : Convenient and quick , Efficient
shortcoming : The request method is not completely encapsulated , Or scattered throughout the page , Later maintenance is not convenient
Package method 2
1. New request file

const baseUrl = "http://localhost:6645"
// Get all recruitment information
export function getAllRecruit() {
return uni.request({
url: baseUrl + '/recruit/getAll', // Just for the sample , Not the real interface address .
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded' // Custom request header information
}
});
}2. Import... In the page
import {getAllRecruit} from "../../api/recruit_info.js"3, stay created Call in periodic function
created() {
// Get all recruitment information
getAllRecruit().then(res =>{
console.log(res)
})
}4. design sketch 、

Advantages and disadvantages
advantage : The request method is encapsulated in a separate folder , The page only needs to call , No other business code is required , Easy to maintain
shortcoming : Import required , export , There is more code than method one
边栏推荐
- 20. Network principles - Basic Concepts
- OpenCV 教程 02: OpenCV 的核心操作
- Go -- the difference between array and slice
- 解决数据库连接池HikariCP问题
- App security detection guide learning notes
- 开口就要20k的软件测试工程师需要掌握哪些技能?有这些技能我敢要更高~
- 长安链tls基础研究
- 宇宙第一 IDE 霸主,换人了。。。
- BRITS: Bidirectional Recurrent Imputation for Time Series(时间序列的双向递归填补)论文详解
- Development of power module based on stm32
猜你喜欢

leetcode:1552. 两球之间的磁力【最值的最值 = 二分】

顺丰同城测试开发一面 49min答案

Electron installation configuration

动态内存管理(c语言)

【云原生】DevOps(四):集成Sonar Qube

There is something that turns vscode into an idea effect

Redis - 槽管理命令详解
![[uniapp checkbox] modify the style of the uniapp checkbox check box](/img/e3/db2711adcf1267ed6b7088fcea7607.png)
[uniapp checkbox] modify the style of the uniapp checkbox check box

Play through ansible directory in one step

Applet page navigation
随机推荐
Termux related
机器学习|BP(Back Propagation)神经网络
每日刷题记录 (二十五)
创业公司股权结构设计(案例)
Flutter 绘制非常有趣的贝塞尔曲线动画
21. How does the program execute after entering the URL in the browser?
Multipartfile to Base64
激活navicat提示rsa public key not find的问题
ccf真题(怒拿100昏)
小姐姐我来啦
Pytorch 深度可分离卷积和MobileNet_v1
Code that programmers can't understand
Code that programmers can't guess
数学建模不会 LaTex 排版 | 教你如何在 Word 中优雅地使用漂亮的 LaTex 公式
解决数据库连接池HikariCP问题
树莓派记录
【缓存】一种新的缓存 Caffeine Cach 介绍
1.解决com.mysql.jdbc.PacketTooBigException: Packet for query is too large
1. Reptile overview
Paddle CrowdNet 人群密度估计