Promise 让你的项目更有逼格

最新推荐文章于 2024-09-13 23:32:49 发布

weixin_34277853

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量94

点赞数

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5b70e7ee6fb9a009982de15f

版权

promise 详解

概念：Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

直接看各种demo 拗口的文字直接丢弃掉，选择遗忘吧

promise 出现的原因

let cb = (data) => {
    console.log(data)
}

let ajax = (cb) => {
    console.log('ajax ---- ')
    if (typeof cb == 'function') {
        cb('callback ----')
    }
}
ajax(cb)
/**
 * console.log
 * ajax ----
 * callback ----
 */
复制代码

1.缺点一直需要cb传递，如果挂在全局对象，则会操作污染

2.代码易读性比较差

3.特别需要获取多个异步操作时，无法很好检测结果完成

举例子说明上述第三点

let num = 1;
let ajax1 = () => {
    setTimeout(() => {
        num++;
        console.log(1000);
        callbackAll();
    }, 1000)
}
let ajax2 = () => {
    setTimeout(() => {
        num++;
        console.log(1500)
        callbackAll();
    }, 1500)
}
let ajax3 = () => {
    setTimeout(() => {
        num++;
        console.log(2000)
        callbackAll();
    }, 2000)
}
let ajaxAll = () => {
    ajax1();
    ajax2();
    ajax3();
}
let callbackAll = () => {
    if (num == 3) {
        // 全部完成
        console.log('全部完成～')
    }
}

复制代码

如果用promise 方案解决代码如下

let ajax1 = () => {
    return new Promise((reslove, reject) => {
        setTimeout(() => {
            console.log(1000);
        }, 1000)
    })
}
let ajax2 = () => {
    return new Promise((reslove, reject) => {
        setTimeout(() => {
            console.log(1500);
        }, 1500)
    })
}
let ajax3 = () => {
    return new Promise((reslove, reject) => {
        setTimeout(() => {
            console.log(2000);
        }, 2000)
    })
}

Promise.all([ajax1, ajax2, ajax3]).then(function() {
        console.log('全部完成～')
    }).catch(function(err) {

    })
/** 
 * 对比一下，会看到代码的整体的美观度得到很大的提升
 * 
 */
复制代码

既然说到了promise all then catch 我们来分别讲解一下

then 所有的promise实例都有then 方法，来对这个promise实例做下一步的处理，then 接受两个方法，第一个对应resolve 第二个对应 reject

let person = () => {
    return new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve(10)
            }, 1000)
        })
        .then(function(data) {
            console.log(data)
        })
}

// data == 10

// 有时候会看到直接return 的数据
// promise 实例 被 resolved then方法的第一个回掉方法会被执行

复制代码

如果被 rejected，then方法的第二个回掉会被执行

let person = () => {
    return new Promise((resolve, reject) => {
            setTimeout(function() {
                reject(20)
            }, 1000)
        })
        .then(function(num) {
            console.log(num + 'suc')
        }, function(num) {
            console.log(num + 'err')
        })
}
复制代码

catch promise 实例被rejected时，catch回调函数被执行

可以参考下面的例子

new Promise((res, rej) => {
    setTimeout(function() {
        rej(11)
    }, 500)
}).then(function() {
    console.log('success')
}).catch((err) => {
    console.log('err')
})
复制代码

all 有许多个异步任务被同时触发，但你只想在它们都完成之后才做出回应---这就是Promise.all的由来。Promise.all方法传入一个promise的数组，然后在它们全部resolved之后再出发回调函数

Promise.all([promise1, promise1]).then(function(data) {
    // promise1 promise2 全部完成后 才会执行这里
})
.catch(function(error) {
    // promise1 promise2 出现一个 rejected 时 执行这里
});
复制代码

race不是等待所有的promise被resolved或者rejected，而是只要数组中有一个promise被resolved或者rejected，Promise.race方法就被触发

var promise1 = new Promise(function(resolve, reject) {
    // A mock async action using setTimeout
    setTimeout(function() { resolve('1111!'); }, 8000);
});
var promise2 = new Promise(function(resolve, reject) {
    // A mock async action using setTimeout
    setTimeout(function() { resolve('2222!'); }, 3000);
});
Promise.race([promise1, promise2]).then(function(one) {
    console.log('执行结果: ', one);
}).catch(function(one, two) {
    console.log('报错信息: ', one);
});
复制代码