1***@qq.com

发布：2022-11-30 09:57
更新：2022-11-30 17:24
阅读：192

【报Bug】VUE3下面, 运行DEMO中的代码 res = await uni.request(...不成功, 且服务端发现只传过来一个空的HTTP,...

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型：正式

HBuilderX版本号： 3.6.5

手机系统： Android

手机系统版本号： Android 12

手机厂商： OPPO

手机机型： OPP32

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

操作步骤：

1

预期结果：

2

实际结果：

3

bug描述：

我在Hbuildx 3.6.5.20221121版中,

1>新增一个项目,(新增时,选择VUE3)
2>.然后, 将Pages/index/index.vue中的代码粘入以下代码:
3>.然后,运行到内置浏览器中.
4>.我同时, 本机开一个小小的自个写的http服务器.(用网页可以正常访问)
5>.当我点击"发出请求(Async/Await)"按纽时, 该按纽一直处在 * loading状态. 既不会报超时, 也不会返回
6>.以下代码,是从官方DEMO中抄出来的, 目的是测试这种写法:

        // #ifdef VUE3  
        console.log('vue3');  
        try {  
          res = await uni.request({  
            url: requestUrl,  
            dataType: 'text',  
            //timeout: 5,  
            data: {  
              noncestr: Date.now()  
            }  
          });  
        } catch (e) {  
          err = e  
        }

以便能实现等待http返回后, 再继续写后续代码.(顺序执行)
7>.我服务端是有收到HTTP请求, 但是内空只是一个" /"
8>.且我服务端, 也会回发一个Response,但是客户端好像没有收到(或者收到但不做反映)

烦请官方帮忙看一下,非常感谢.

下面是Pages/index/index.vue的完整代码

<template>  
  <view>  
    <view class="uni-padding-wrap uni-common-mt">  
      <button type="primary" @click="sendRequest('await')" :loading="loading">发起请求（Async/Await）</button>  
    </view>  
  </view>  
</template>  
<script>  
  //const requestUrl = 'http://192.168.1.6:9000/?aaa=fff'  
  const requestUrl = 'http://127.0.0.1:9000/?aaa=fff'  
  const duration = 2000  

  export default {  
    data() {  
      return {  
        title: 'text',  
        loading: false  
      }  
    },  
    methods: {  

      sendRequest(mode) {  
        this.loading = true;  
        switch (mode) {  
          case 'promise':  
            this._requestPromise();  
            break;  
          case 'await':  
            this._requestAwait();  
            break;  
          default:  
            this._request();  
            break;  
        }  
      },  

      async _requestAwait() {  
        // #ifndef VUE3  
        console.log('vue2');  
        let res, err //它也是定义变量,let: 它所声明的变量一定要在变量声明后使用，否则报错  
        [err, res] = await uni.request({  
          url: requestUrl,  
          dataType: 'text',  
          data: {  
            noncestr: Date.now()  
          }  
        });  
        // #endif  

        // #ifdef VUE3  
        console.log('vue3');  
        try {  
          res = await uni.request({  
            url: requestUrl,  
            dataType: 'text',  
            //timeout: 5,  
            data: {  
              noncestr: Date.now()  
            }  
          });  
        } catch (e) {  
          err = e  
        }  

        console.log('下面进行判断....');  
        // #endif  
        if (err) {  
          console.log('request fail', err);  
          uni.showModal({  
            content: err.errMsg,  
            showCancel: false  
          });  
        } else {  
          console.log('request success', res)  
          uni.showToast({  
            title: JSON.stringify(res),  
            icon: 'success',  
            mask: true,  
            duration: duration  
          });  
          this.res = '请求结果 : ' + JSON.stringify(res);  
        }  
        this.loading = false;  
         console.log('判断完成!');  
      }  

    }  
  }  
</script>  

<style>  

</style>

2022-11-30 09:57 负责人:无分享

5 个回复

1***@qq.com (作者)

代码中的
const requestUrl = 'http://127.0.0.1:9000/?aaa=fff'
你可以改为你自已的http链接

zZZ1Ma

console.log('vue2'); 下面let res, err 写到条件注释外，会用catch不知道catch内打印一下error？

1***@qq.com (作者)

我新建项目时, 采用的是VUE 3, 因此, 不会进入以下代码!!!

        // #ifndef VUE3    
        console.log('vue2');    
        let res, err //它也是定义变量,let: 它所声明的变量一定要在变量声明后使用，否则报错    
        [err, res] = await uni.request({    
          url: requestUrl,    
          dataType: 'text',    
          data: {    
            noncestr: Date.now()    
          }    
        });    
        // #endif

1***@qq.com (作者)

因此,也不存在你说的"打印err"的说法

2022-11-30 11:51
zZZ1Ma

回复 1***@qq.com: 你只在vue2代码块里声明res和err变量，vue3代码块内try下的res以及catch下err不用声明？

2022-11-30 11:59
zZZ1Ma

回复 1***@qq.com: // #ifndef VUE3

console.log('vue2');

let res, err //它也是定...

这里的变量声明放到方法下第一行，很难理解吗

2022-11-30 12:00
zZZ1Ma

catch(e) {

console.log(e)

err = e // err Undefined

}

2022-11-30 12:02

1***@qq.com (作者)

非常感谢您的解答.

没错, 确实是没有定义变量的原因.

编译时, 没有报错, 但执行时会报错.

我是一个小白, 是从DEMO中, 直接抄过来的代码. 可能DEMO中有误.

再次感谢您的解答, 我的问题解决了. ( 并非BUG)

1***@qq.com (作者)

最后, 对比了一下, 我以后, 还是用这种默认方式来操作吧.


        uni.request({  
          url: requestUrl,  
          dataType: 'text',  
          timeout: 5000, //毫秒数计算  
          data: {  
            noncestr: Date.now()  
          },  
          success: (res) => {  
            console.log('request success', res)  
            uni.showToast({  
              title: '请求成功',  
              icon: 'success',  
              mask: true,  
              duration: duration  
            });  
            //this.myText = this.myText + '\n' + '请求结果 : ' + JSON.stringify(res);  

          },  
          fail: (err) => {  
            //this.myText = this.myText + '\n' + err.errMsg;  
          },  
          complete: () => {  
            //this.loading = false;  
            //this.myText = this.myText + '\n' + '*****Complete!******';  
          }  
        });

zZZ1Ma

vue3可用Promise方式使用request，代码清晰、整洁；多个request链式调用也可更好的捕获错误；不推荐callBack方式使用，无法规避回调地狱

2022-11-30 18:14

1***@qq.com (作者)

回复 2***@qq.com:

您的意思是,采用下面这种代码, 避免窗口关闭后, 代码仍鬼魂式进入回调区域....

                uni.request({  

                    url: requestUrl,  

                    dataType: 'text',  

                    data: {  

                        noncestr: Date.now()  

                    }  

                }).then(res => {  

                    console.log('request success', res);  

                    uni.showToast({  

                        title: '请求成功',  

                        icon: 'success',  

                        mask: true,  

                        duration: duration  

                    });  

                    this.res = '请求结果 : ' + JSON.stringify(res);  



                    this.loading = false;  

                }).catch(err => {  

                    console.log('request fail', err);  

                    uni.showModal({  

                        content: err.errMsg,  

                        showCancel: false  

                    });  



                    this.loading = false;  

                });

2022-12-05 21:49

zZZ1Ma

回复 2@qq.com: 回复 1@qq.com:

题主你好，最近在居家没有及时回复，抱歉；

以下代码为常见取消订单示例，仅供参考：

  const state = shallowReactive({  

    loading: false,  

  })  

  // ButtonClick：取消订单  

  const handleClick = () => {  

    uni.showModal({ content: '确定删除此订单？' })  

      .then(({ confirm }) => {  

        // 点击【取消】按钮，无操作（返回自定义status，便于区分catch内其它情况）  

        if (!confirm) return Promise.reject({ status: -1, title: '点击取消' })  

        // 点击【确定】按钮，取消订单  

        state.loading = true // Button loading && disabled  

        return uni.request({ url: BaseURL + 'order/cancel', data: { order_id: 101 } })  

      })  

      .then(({ status }) => {  

        /**  

         * 取消订单成功的逻辑在此处理：  

         * 更新订单详情或返回订单列表页  

         */  

      })  

      .catch(({ status, ...args }) => {  

        /**  

         * 点击取消或取消失败的逻辑在此处理：  

         * status === -1：用户点击了【取消】按钮  

         * status === 0：取消订单失败，此状态码一般为0，需按后端返回结果判断  

         */  

      })  

      .finally(() => state.loading = false)  

  }

2022-12-21 17:52

zZZ1Ma

这些代码如果采用回调的方式写，会很臃肿；更改loading可在Promise.prototype.finally()内执行，无需then()和catch()都写一遍

2022-12-21 17:57

要回复问题请先登录或注册

【报Bug】VUE3下面, 运行DEMO中的代码 res = await uni.request(...不成功, 且服务端发现只传过来一个空的HTTP,...

操作步骤：

1

预期结果：

2

实际结果：

3

bug描述：

5 个回复

公告

相关问题

【报Bug】VUE3下面, 运行DEMO中的代码 res = await uni.request(...不成功, 且服务端发现只传过来一个空的HTTP,...

操作步骤： 1

预期结果： 2

实际结果： 3

bug描述：

与内容相关的链接

5 个回复

公告

相关问题

操作步骤：

1

预期结果：

2

实际结果：

3