Promise的一些实践

业务中出现的小bug，趁此机会总结一下对Promise的实践经验。

• 链式发起，逐个回调
• 同步发起，按返回时间回调
• 同步发起，全部执行完在进行回调
• more...

---

主要用到以下特性

promise

---

原始地址

详细内容 地址
作者 MaBond

---

1. 模拟的ajax请求

模拟服务器处理

     const server = function (url, num) {
        console.log(`servering in ${num}`)
        return new Promise(function (res, rej) {
            setTimeout(function () {
                /* 
                    注意
                        只要有返回都视为成功的一次请求
                        只有 没填写url，或者get post写反才是失败

                    注意
                    reslove()
                    console.log('xxxxx') //  xxxx  在resolve之后的代码还是会执行  => 写出 return reslove()

                */
                if (!url) {
                    return rej('404')
                }
                if (num > 10) {
                    return res({
                        success: true,
                        num: num,
                        data: [
                            {
                                name: 'sunweiqi',
                                age: 100
                            },
                            {
                                name: 'qiqiqi',
                                age: 18
                            }
                        ]
                    })
                } else {
                    return res({
                        success: false,
                        num: num,
                        msg: '粗错了: num < 10'
                    })
                }

            }, Math.random() * 3000)
        })
    }

模拟fetch

    const fetch = async function (url, num) {
        try {
            let response = await server(url, num)
            return Promise.resolve(response)
        } catch (error) {
            return Promise.reject(error)
        }

    }

封装fetch

    const getData = async (url, num) => {
        try {
            const result = await fetch(url, num)
            return Promise.resolve(result)
        } catch (error) {
            throw new Error(error)
        }
    }

2. 几种不同的请求执行方式

2.1 依次逐个发起 完成后 在进行下一个请求

    const getByOrder = async () => {
        try {

            const res_1 = await getData('url_1', 111)
            if (res_1.success) {
                console.log("res_1 成功！=> ", res_1.data)
            } else {
                console.log("res_1 失败! => ", res_1.msg)
            }

        } catch (error) {
            console.error(error)
        }

        try {
            const res_2 = await getData('', 222)
            if (res_2.success) {
                console.log("res_2 成功！=> ", res_2.data)
            } else {
                console.log("res_2 失败! => ", res_2.msg)
            }
        } catch (error) {
            console.error(error)
        }

        try {
            const res_3 = await getData('url_3', 1)
            if (res_3.success) {
                console.log("res_3 成功！=> ", res_3.data)
            } else {
                console.log("res_3 失败! => ", res_3.msg)
            }
        } catch (error) {
            console.error(error)
        }
    }

    getByOrder()

控制台输出结果

        servering in 111
        res_1 成功！=> (2)[{ … }, { … }]

        servering in 222
        Error: 404
            at getData 
            at <anonymous>
            
        servering in 1
        res_3 失败! => 粗错了: num < 10

程序按照请求顺序链式发生，且等到上一步执行完毕才继续执行下一步

2.2 同步发起，按返回时间回调

    getData('url_1', 111).then(res => {
        if (res.success) {
            console.log("url_1 成功！=> ", res.data)
        } else {
            console.log("url_1 失败! => ", res.msg)
        }
    }).catch(error => console.error(error))

    getData('', 222).then(res => {
        if (res.success) {
            console.log("url_2 成功！=> ", res.data)
        } else {
            console.log("url_2 失败! => ", res.msg)
        }
    }).catch(error => console.error(error))

    getData('url_3', 1).then(res => {
        if (res.success) {
            console.log("res_3 成功！=> ", res.data)
        } else {
            console.log("res_3 失败! => ", res.msg)
        }
    }).catch(error => console.error(error))

控制台输出结果

    servering in 111
    servering in 222
    servering in 1

    Error: 404
        at getData 
        at <anonymous>

    res_3 失败! => 粗错了: num < 10
    url_1 成功！=> (2)[{ … }, { … }]

    三个请求同时发起，按照返回时间逐个回调

2.3 同步发起，全部执行完在进行回调

    const getAll = async () => {
        try {
            const [res_1, res_2, res_3] = await Promise.all([getData('url_1', 111), getData('', 222), getData('time_3', 1)])
            if (res_1.success) {
                console.log("res_1 成功！=> ", res_1.data)
            } else {
                console.log("res_1 失败! => ", res_1.msg)
            }
            if (res_2.success) {
                console.log("res_2 成功！=> ", res_2.data)
            } else {
                console.log("res_2 失败! => ", res_2.msg)
            }
            if (res_3.success) {
                console.log("res_3 成功！=> ", res_3.data)
            } else {
                console.log("res_3 失败! => ", res_3.msg)
            }
        } catch (error) {
            console.error(error)
        }
    }

    getAll()

控制台输出结果

    servering in 111
    servering in 222
    servering in 1
    Error: 404
        at getData 
        at <anonymous>

四个请求同步发起，等到最久的一个执行完后在进行回调

2.4 未完待续