微信小程序-EventChannel

前言

不得不说，我好像是加班加傻了，最近一直在猛加班，这样低级的失误也开始犯了，仔细想想就知道这样的代码是有问题的，但既然犯错了，还是简单记录一下吧。

bug出现原因

因为我个人对于请求写的是稍微比较杂的，有时候用.then，有时候用async await,就导致了错误

平时写法

这里我贴出了我平时写async，await的一个简单兜底方法，为了避免await导致的代码阻塞，我一般都是结合try，catch来写的async，await，当promise错误的时候，会执行catch中的代码，就类似这样。

<template>
    <t-button :loading="loading" @click="handleTest">测试</t-button>
</template>
<script setup lang="ts">
import { MessagePlugin } from "tdesign-vue-next";
import {ref} from "vue";

// loading状态
const loading= ref(false)

const promise1=()=>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('成功')
        }, 1000);
    })
}


const promise2=()=>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('失败')
        }, 1000);
    })
}

const handleTest=async ()=>{
    try{
        // 如果random大于0.5，就执行promise1，否则执行promise2
        const random=Math.random();
        loading.value=true;
        random>0.5?await promise1():await promise2();
        loading.value=false;
        MessagePlugin.success("请求成功")
    }
    catch(err){
        MessagePlugin.error("请求失败")
        loading.value=false;
    }
}
</script>

bug写法

然后那天我也不知道咋回事突发奇想了，写出了这样的代码

<template>
    <t-button :loading="loading" @click="handleTest">测试</t-button>
</template>
<script setup lang="ts">
import { MessagePlugin } from "tdesign-vue-next";
import {ref} from "vue";

// loading状态
const loading= ref(false)

const promise1=()=>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('成功')
        }, 1000);
    })
}


const promise2=()=>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('失败')
        }, 1000);
    })
}

const promise3=()=>{
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('请求失败')
        }, 1000);
    })
}

const handleTest=async ()=>{
    try{
        loading.value=true;
        promise3().then(async ()=>{
            const random=Math.random();
            random>0.5?await promise1():await promise2();
            loading.value=false;
            MessagePlugin.success("请求成功")
        })
    }
    catch(err){
        MessagePlugin.error("请求失败")
        loading.value=false;
    }
}
</script>

就是发送某个请求之前要先请求一下某个请求，完事之后再根据情况去请求。这样写乍看也没啥毛病，我有try,catch兜底啊，结果不如人意,我的请求阻塞住了，也并没有走catch,这是因为Promise.then有自己catch，它并不会被外层的catch捕获到，这个其实很简单的逻辑，我加班加麻了，没留意到

正确写法

那正确的写法应该是怎么样的呢,其实很简单，都用await的写法就可以了

const handleTest=async ()=>{
    try{
        loading.value=true;
        await promise3();
        const random=Math.random();
        random>0.5?await promise1():await promise2();
        loading.value=false;
        MessagePlugin.success("请求成功")
    }
    catch(err){
        MessagePlugin.error("请求失败",err)
        loading.value=false;
    }
}

结语

小细节需留意，希望大家和我一起做大做强！