前端Vue uni-app中的通用网络请求封装：common.js的使用
摘要：
在前端开发中，网络请求是必不可少的环节。为了提高开发效率和代码复用性，我们通常会对网络请求进行封装。本文将介绍如何使用common.js文件来封装网络请求，并通过Vue uni-app框架实现通用请求。这种封装方式支持多种请求类型、动态配置请求地址和参数，并且具有请求成功和失败的回调处理。
一、引言
随着前端技术的不断发展，网络请求在应用程序中的作用越来越重要。为了简化开发过程和提高代码的可维护性，我们通常会对网络请求进行封装。在Vue uni-app框架中，我们可以利用common.js文件来创建一个通用的网络请求模块。这个模块可以处理各种类型的请求，并且允许动态配置请求地址和参数。
二、common.js网络请求模块的设计
common.js网络请求模块主要包括以下几个部分：
-
请求方法封装：将常用的HTTP方法（如GET、POST等）封装为统一的方法，以便在调用时传入相应的参数。
-
请求地址和参数的动态配置：允许开发者根据需要动态配置请求的地址和参数。这样可以更加灵活地应对不同的接口需求。
-
请求回调处理：包括成功回调和失败回调，以便在请求成功或失败时执行相应的操作。
三、使用common.js进行网络请求
使用common.js进行网络请求非常简单。首先，你需要引入common.js文件。然后，你可以调用common.js中封装的请求方法，并传入相应的参数。以下是一个简单的示例：
使用方法
复制代码引入common.js文件
import common from '../../common/common.js'
requestData(){
let reqData = {
"sv": '200',
"tid":'gda',
'tv': 'r20230530',
'st':'env'
}
// 请求数据
common.sendRequest('POST', common.KTradeid_policy, reqData, (data) => {
console.log('成功返回数据 = ' + JSON.stringify(data));
uni.showModal({
title:'温馨提示',
content:'请求返回数据 = ' + JSON.stringify(data)
})
}, (data) => {
console.log('失败返回数据 = ' + JSON.stringify(data));
})
}
HTML代码部分
复制代码<template>
<view class="content">
<button style="margin: 26px 60px;" @click="requestData"> 点击发送简单通用请求 </button>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
JS代码 （引入组件 填充数据）
复制代码
<script>
import common from '../../common/common.js'
export default {
data() {
return {
title: 'Hello'
}
},
methods: {
requestData(){
let reqData = {
"sv": '200',
"tid":'gda',
'tv': 'r20230530',
'st':'env'
}
// 请求数据
common.sendRequest('POST', common.KTradeid_policy, reqData, (data) => {
console.log('成功返回数据 = ' + JSON.stringify(data));
uni.showModal({
title:'温馨提示',
content:'请求返回数据 = ' + JSON.stringify(data)
})
}, (data) => {
console.log('失败返回数据 = ' + JSON.stringify(data));
})
}
}
}
</script>
在这个示例中，我们调用了common.js中的sendRequest方法，并传入了请求类型、请求地址、请求参数以及成功回调和失败回调函数。当请求成功时，成功回调函数将被执行；当请求失败时，失败回调函数将被执行。
四、总结
通过使用common.js文件对网络请求进行封装，我们可以更加方便地处理各种类型的网络请求。这种封装方式不仅提高了代码的复用性，还使得代码更加简洁易读。同时，通过动态配置请求地址和参数，我们可以更加灵活地应对不同的接口需求。在未来的开发中，我们还可以进一步扩展common.js的功能，例如添加请求超时的设置、支持更多的HTTP方法等。
附下载完整组件地址：
https://ext.dcloud.net.cn/plugin?id=12794
请关注我的微信技术公众号： 前端组件开发
欢迎加入前端组件开发学习交流群，一起学习成长！可关注 “前端组件开发” 公众号后，私信后可申请入群。
