简单记录一下uniapp请求进行封装的相关内容,方便以后查看!
1.目录结构
2.封装文件
2.1 全局公共方法封装
2.2 请求方法封装
2.3 项目请求路径封装
2.4 常用变量封装
2.5 页面使用
1.目录结构
项目根目录下创建common文件夹,包含内容:
全局公共方法封装 commonMethod.js
请求方法封装 packageMethod.js
项目请求路径封装 httpApi.js
常用变量封装 config.js
不清楚文件内容的可以继续往下看.
2.1 全局公共方法封装
这里主要是封装一下常用的方法
/**
* 页面跳转
* @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
}
main.js中注册全局公共方法
// 全局自定义方法 Vue.prototype:使用范围是每个vue实例中可用
import {commonMethod} from './common/commonMethod.js'
Vue.prototype.$commonMethod=commonMethod
2.2 请求方法封装
这里是对常用的rest请求进行封装
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 项目请求路径封装
这里对服务端的请求路径进行封装
var packageMethod = require('./packageMethod.js');
// 绑定用户公众号openid post表单传参
export function apiA(data) {
return packageMethod.postRequest("/user/apiA?gzhCode=", 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 常用变量封装
这是对常用的变量进行封装
export default{
serverUrl:"https://127.0.0.1:8081",
notifyUrl:'http://fjj4qd.natappfree.cc/demo1/#/pages/notice/notice',
}
2.5 页面使用
方法使用举例,简单列一下常用的post表单传参、post请求体传参、get请求。
<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>
以上是对uniapp请求的封装记录过程,如果感觉有帮助欢迎点赞收藏!
最近参与了一个匿名社交的小程序,感兴趣的可以看一下!
