小程序内使用JS多重异步函数Promise回调的问题

Question

困扰两天了，在网上找了很多方法都没能解决来此提问。

两个异步函数：
第一个函数用于检测设备能否联网

function getNetwork() {
    return new Promise((resolve, reject) => {
        wx.getNetworkType({
            success(res) {
                if (res.networkType === 'none') {
                    reject()
                } else {
                    resolve()
                }
            }
        })
    })
}

第二个函数先调用第一个函数然后then之后再执行

function HTTP(url) {
    return getNetwork().then(() => {
        return new Promise((resolve, reject) => {
            wx.request({
                url: url,
                method:"GET",
                success: (res) => {
                    wx.hideLoading();
                    if(res.data.code==1){
                        resolve(res.data);
                    }else{
                        reject(res.data);
                    }
                },
                fail: (err) => {
                    reject(err);
                }
            })
        })
    }).catch(() => {
        wx.showToast({
            title: '未能连接网络',
            icon: 'none',
            duration: 5000
        })
        return {'data':null};
    })//判断网络连接
}

在使用过程中即使第二个函数异常执行了catch，但是会执行第一个函数的then，请问如何让解决，感谢。

Answer 1

既然问题都已经解决了，这里不讨论问题本身。只是建议尽量使用新语法来简化代码。

1. 基础库从 2.10.2 版本开始支持返回 Promise，不需要自己封装
2. 微信开发工具从 0.10.101000 开始就支持增强编译，允许使用 await。 使用 await 可以简化代码写法，参考：理解 JavaScript 的 async/await

基于上述两点，代码可以简化一些

async function getNetwork() {
    const { networkType } = await wx.getNetworkType();
    if (networkType === "none") {
        throw new Error("No network found");
    }
}

async function HTTP(url) {
    getNetwork();
    const res = await wx.request({
        url,
        method: "GET"
    });

    if (res.data.code === 1) {
        return res;
    }

    wx.showToast({
        title: "未能连接网络",
        icon: "none",
        duration: 5000
    });

    // 这里如果需要 reject 用 throw，需要 resolve 用 return
    throw { "data": null };
}

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

1. 如果执行了 wx.request()，那说明 getNetwork() 是成功的。catch 的是 wx.request() 的问题。
2. 但是你的错误信息都是“未能连接网络”，所以你骗了自己。
3. 建议用 async function 改造，逻辑会更清晰。如果非要用 thenable，多加几个 .catch()，插入一些跳出点。

Answer 3

第二个函数异常执行了catch，但是会执行第一个函数的then，为什么会出现这种情况呢？
因为第二个函数中reject的而不是第一个函数reject的；

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。