JS Promise - 掘金

这篇文章记录一下自己学习promise的心得，如果有不对的地方，欢迎各位指出！！

基础用法

学过promise，应该都了解到，这是js实现异步的一种方式，主要用于解决回调地狱的问题的，那么什么是回调地狱呢？

当我们在进行接口请求时，如果有碰到这么一种情况，请求完接口a，利用接口a的结果去请求接口b接口，再用接口b的结果去请求接口c ......

$.ajax({
    url: '/a',
    success: function(resA) {
        $.ajax({
            url: '/b',
            data: {a: resA},
            success: function(resB){
                // ......
            }
        })    }
})

这个时候的回调函数是一层嵌套一层的，这就回调地狱的其中一种情况。这个时候的代码的可读性变得很差，所以我们可以用promise进行优化。

const a = function() {
    new Promise((res, rej) => {
        $.ajax({
            url: '/a',
            success(data) {
                res(data)        
            }
        })
    })
}

const b = function(dataA){
    return new Promise((res, rej) => {
        $.ajax({
            url: '/b',
            data: {a: dataA},
            success(data) {
                res(data)        
            }
        })    })
}

a().then(data => {
    return b(data)
}).then(data => {
    // ......
})

当我们把代码改为promise的写法时，看起来就方便很多了。

promise.all

记得早些时间面试的时候，有个面试官问我：“如何用promise实现图片按顺序加载？”，当时的我对于promise.all 这个方法并不是很熟悉，所以没有答上来。

all 方法的意思是，等待所有的promise程序都返回结果之后执行后续的程序，代码表现为：

let p1 = new Promise((resolve, reject) => {  
    resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {  
    resolve('success')
})

let p3 = Promse.reject('失败')

Promise.all([p1, p2]).then((result) => {  
    console.log(result)                
    //['成功了', 'success']
}).catch((error) => {  
    console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {  
    console.log(result)
}).catch((error) => {  
    console.log(error)      
    // 失败了，打出 '失败'
})

上面的程序中一共有三个promise为p1、p2、p3，其中p1、p2是执行成功的，p3是失败的。

当我们用 all 方法监听 p1、p2时，因为监听的所有的promise都是成功的，所以程序进入then函数中，接收的参数result为一个数组，数组的每一项，是对应的监听顺序的每一项返回的参数。

这时候回到‘面试官’的问题，假设我们有10张图片，虽然每张图片加载的时间不同，但是我们可以在所有的图片加载完成之后，再按照顺序渲染到页面中，以实现按顺序加载图片。

而当我们用 all 方法监听 p1、p2、p3时，由于p3的执行失败了，所以程序就进入了catch中了，这个error接收的是失败的程序返回的值。

promise.race

let p1 = new Promise((resolve, reject) => {  
    setTimeout(() => {    
        resolve('success')  
    },1000)
})

let p2 = new Promise((resolve, reject) => {  
    setTimeout(() => {    
        reject('failed')  
    }, 500)
})

Promise.race([p1, p2]).then((result) => {  
    console.log(result)
}).catch((error) => {  
    console.log(error)  
    // 打出的是 'failed'
})

race方法说的是，当程序中的任意一项执行完成后，执行后续的then或者catch。

示例中p2的程序是0.5s执行完成的，所以程序进入的catch函数。

当两个程序都是成功的时候，哪个promise先执行完成，then就接收到谁的参数执行后面的内容了，后面的promise执行完成就不会再触发then函数了

感谢各位观看！！！

求赞！！！