Enregistrez simplement le contenu pertinent de l'encapsulation de requête uniapp, ce qui est pratique pour une visualisation future !
1. Structure de répertoire
2. Fichiers d'encapsulation
2.1 Encapsulation de méthode publique globale
2.2 Encapsulation de méthode de requête
2.3 Encapsulation de chemin de requête de projet
2.4 Encapsulation de variable commune
2.5 Utilisation de la page
1. Structure du répertoire
Créez un dossier commun sous le répertoire racine du projet, y compris le contenu :
global public method encapsulation commonMethod.js
request method encapsulation packageMethod.js
project request path encapsulation httpApi.js
common used variables encapsulation config.js
Si vous ne connaissez pas le contenu du fichier, vous pouvez continuer à regarder vers le bas.
2.1 Encapsulation de méthode publique globale
Voici principalement pour encapsuler les méthodes couramment utilisées
/**
* 页面跳转
* @author txm
*
* @param {
String} url 需要跳转的页面的路径
*/
const goTo = (url) => {
uni.navigateTo({
url:url
})
}
/**
* index页面跳转
* @author txm
*
* @param {
String} url 需要跳转的index页面的路径
*/
const goToIndex = (url) => {
uni.switchTab({
url,
success: function (res) {
console.log(res)
},
fail: function (e) {
console.log(e)
}
})
}
/**
* 消息弹窗
* @author txm
*
* @param {
String} title 标题
* @param {
Number} duration 窗口动画持续时间，单位为 ms
* @param {
String} icon
*/
const showMsg=(title,icon='none',duration=1500)=>{
uni.showToast({
title,
duration,
icon
});
}
/**
* 显示加载中
* @author txm
*
*/
const showLoading=()=>{
uni.showLoading({
title: '加载中',
mask: true
})
}
/**
* 取消加载中
* @author txm
*
*/
const hideLoading=()=>{
uni.hideLoading();
}
//注册定义的方法
export const commonMethod={
goTo,
goToIndex,
showMsg,
showLoading,
hideLoading
}
Enregistrer les méthodes publiques globales dans main.js
// 全局自定义方法 Vue.prototype:使用范围是每个vue实例中可用
import {
commonMethod} from './common/commonMethod.js'
Vue.prototype.$commonMethod=commonMethod
2.2 Encapsulation de la méthode de requête
Voici l'encapsulation des demandes de repos courantes
import {
commonMethod} from '@/common/commonMethod.js'
import config from '@/common/config.js'
// 服务器路径
const serverUrl = config.serverUrl;
// 用户token
const token = uni.getStorageSync('token');
// post请求封装
function postRequest(url, data, header) {
var promise = new Promise((resolve, reject) => {
console.log('resolve,reject:this',this)
console.log('commonMethod:',commonMethod)
// 显示加载中
commonMethod.showLoading()
uni.request({
url: serverUrl + url,
data: data,
method: 'POST',
timeout: 100000,
header: {
'content-type': header || 'application/json',
'token': token,
},
success: function(res){
console.log('success:res',JSON.stringify(res))
commonMethod.hideLoading();
if (res.data.code == 200) {
resolve(res.data.data);
}else{
// 非正常接口返回按照回调失败处理,方法中使用catch进行捕获显示到页面
reject(res.data);
}
},
fail: function(e) {
console.log('fail:e',JSON.stringify(e))
commonMethod.hideLoading();
reject('网络错误');
}
})
});
return promise;
}
// get请求封装
function getRequest(url, data) {
var promise = new Promise((resolve, reject) =>{
// 显示加载中
commonMethod.showLoading()
uni.request({
url: serverUrl + url,
data: data,
method: 'GET',
timeout: 100000,
header: {
'content-type': 'application/json',
'token': token
},
success: function(res){
commonMethod.hideLoading();
if (res.data.code == 200) {
resolve(res.data.data);
}else{
// 非正常接口返回按照回调失败处理,方法中使用catch进行捕获显示到页面
reject(res.data);
}
},
fail: function(e) {
console.log('fail:e',JSON.stringify(e))
commonMethod.hideLoading();
reject('网络错误');
}
})
});
return promise;
}
//put请求封装
function putRequest(url,data,header){
var promise = new Promise((resolve,reject) => {
// 显示加载中
commonMethod.showLoading()
uni.request({
url:serverUrl + url,
data:data,
method:"PUT",
header:{
'content-type': header || 'application/json',
'token': token,
},
success:function(res){
commonMethod.hideLoading();
if (res.data.code == 200) {
resolve(res.data.data);
}else{
// 非正常接口返回按照回调失败处理,方法中使用catch进行捕获显示到页面
reject(res.data);
}
},
fail:function(e){
console.log('fail:e',JSON.stringify(e))
commonMethod.hideLoading();
reject('网络错误');
}
});
});
return promise;
}
//del请求封装
function delRequest(url,data){
var promise = new Promise((resolve,reject) => {
// 显示加载中
commonMethod.showLoading()
uni.request({
url:commoneUrl + url,
data:data,
method:"DELETE",
header:{
'content-type': header || 'application/json',
'token': token,
},
success:function(res){
commonMethod.hideLoading();
if (res.data.code == 200) {
resolve(res.data.data);
}else{
// 非正常接口返回按照回调失败处理,方法中使用catch进行捕获显示到页面
reject(res.data);
}
},
fail:function(e){
console.log('fail:e',JSON.stringify(e))
commonMethod.hideLoading();
reject('网络错误');
}
});
});
return promise;
}
module.exports = {
postRequest,
getRequest,
putRequest,
delRequest
}
2.3 Encapsulation du chemin de la demande de projet
Ici, le chemin de requête du serveur est encapsulé
var packageMethod = require('./packageMethod.js');
// 绑定用户公众号openid post表单传参
export function apiA(data) {
return packageMethod.postRequest("/user/apiA", data,"application/x-www-form-urlencoded");
}
// 测试:post请求体传参
export function apiB(data) {
return packageMethod.postRequest("/user/apiB", data);
}
// 测试:get请求体传参
export function apiC(data) {
return packageMethod.getRequest("/user/apiC", data);
}
2.4 Encapsulation des variables communes
Ceci est l'encapsulation des variables couramment utilisées
export default{
serverUrl:"https://127.0.0.1:8081",
notifyUrl:'http://fjj4qd.natappfree.cc/demo1/#/pages/notice/notice',
}
2.5 Utilisation des pages
Pour des exemples d'utilisation de la méthode, répertoriez brièvement les paramètres de formulaire de publication couramment utilisés, les paramètres de corps de demande de publication et les demandes d'obtention.
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{
{
title}}</text>
</view>
</view>
</template>
<script>
import configInfo from '@/common/config.js'
import {
apiA,apiB,apiC
} from '../../common/httpApi.js';
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
serverApiC(){
apiC({
'a': "123",
'b': 5
}).then(response => {
console.log("response",response)
}).catch((data) => {
this.$commonMethod.showMsg(JSON.stringify(data.msg))
})
},
serverApiB(){
apiB({
'userId': "123",
'contentText': "5",
'contentImg': "8",
}).then(response => {
console.log("response",response)
}).catch((data) => {
this.$commonMethod.showMsg(JSON.stringify(data.msg))
})
},
serverApiA(){
apiA({
'gzhCode': "123"
}).then(response => {
console.log("response",response)
}).catch((data) => {
this.$commonMethod.showMsg(JSON.stringify(data.msg))
})
}
}
}
</script>
<style>
</style>
Ce qui précède est le processus d'encapsulation et d'enregistrement de la demande uniapp. Si vous le trouvez utile, veuillez l'aimer et le collecter !
Récemment, j'ai participé à un programme social anonyme. Si vous êtes intéressé, vous pouvez y jeter un œil !
