美文网首页
uni-app简单通用Request网络请求 支持请求成功 失败

uni-app简单通用Request网络请求 支持请求成功 失败

作者: 前端组件分享 | 来源:发表于2023-05-31 18:33 被阅读0次

    uni-app简单通用Request网络请求 支持请求成功 失败回调; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12794

    效果图如下:

    实现代码如下:

    # 非常简单通用Request网络请求 支持请求成功 失败回调

    #### 使用方法

    ```使用方法

    引入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代码部分

    ```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代码 (引入组件 填充数据)

    ```javascript

    <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>

    ```

    #### CSS

    ```CSS

    <style>

    .content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    }

    .text-area {

    display: flex;

    justify-content: center;

    }

    .title {

    font-size: 36rpx;

    color: #8f8f94;

    }

    </style>

    ```

    相关文章

      网友评论

          本文标题:uni-app简单通用Request网络请求 支持请求成功 失败

          本文链接:https://www.haomeiwen.com/subject/fovyedtx.html