【Web前端基础知识】如何利用promise解决异步

我们知道，在promise对象的then方法可以处理onfulfilled和onrejected两个事件监听回调，但是我们一般采用catch来处理onrejected的监听回调，因为catch可以捕获部分程序异常;有利于程序的健壮性。例如：

1. function getBanner() { 
2.            let p = new Promise((resolve, reject) => { 
3.                $.ajax({ 
4.                    type: "GET", 
5.                    url: "http://localhost:3000/api/index/banner", 
6.                    success: function (response) { 
7.                        resolve(response); 
8.                    }, 
9.                    error: function (err) { 
10.                        reject(err); 
11.                    } 
12.                }); 
13.            }); 
14.            return p; 
15.        } 
16.  
17.        let p = getBanner() 
18.            .then(rst => { 
19.                return rst; 
20.            }) 
21.            .catch(err => { 
22.                console.log(err); 
23.            }); 

我们通过jQuery的ajax来向服务器发起轮播图数据的请求，上面代码若是正确的执行则会进入then方法里处理，若是异常的，也就是说必然进入catch环节,这代码看起来并没有什么，好像也并不复杂。

但是，如果在异步请求过程中出现了几个请求直接有依赖关系，则使用这种解决方案就复杂得多了。例如：

1. $.ajax({ 
2.            url: "http://www.ujiuye.tech/:3000/api/firstCategory", // 所有一级分类 
3.            dataType: "json", 
4.            success(res) { 
5.                $.ajax({ 
6.                    url: `http://www.ujiuye.tech/:3000/api/secondCategory`, // 传递一级ID换取下属的二级分类列表 
7.                    data: { 
8.                        firstId: res['list'][0][0]['firstId'] 
9.                    }, 
10.                    dataType: "json", 
11.                    success(res2) { 
12.                        $.ajax({ 
13.                            url: `http://www.ujiuye.tech/:3000/api/thiredCategory`, // 传递二级分类ID, 获取下属的三级分类列表 
14.                            data: { 
15.                                secondId: res2['list'][0]['secondId'] 
16.                            }, 
17.                            dataType: "json", 
18.                            success(res3) { 
19.                                $.ajax({ 
20.                                    url: `http://www.ujiuye.tech/:3000/api/categoryList`,// 传递三级分类ID, 获取下属的商品数据列表 
21.                                    data: { 
22.                                        thiredId: res3['list'][0]['thiredId'] 
23.                                    }, 
24.                                    dataType: "json", 
25.                                    success(result) { 
26.                                        console.log(result); 
27.                                    } 
28.                                }) 
29.                            } 
30.                        }) 
31.                    } 
32.                }) 
33.            } 
34.        }) 

在小U商城项目中的商品列表页面，我们同时要发起四个请求来分别获取：一级分类、二级分类、三级分类和商品，那么这是时候利用回调函数会出现”回调地狱”的现象，即使是使用promise来优化，也会出现大量的代码嵌套，这样的代码会容易让人疑惑，而且也不利于后续的开发维护。所以我们可以使用async...await来优化这些。

例如上面请求轮播图的例子，使用async和await来优化之后：

1. function getBanner() { 
2.             let p = new Promise((resolve, reject) => { 
3.                 $.ajax({ 
4.                     type: "GET", 
5.                     url: "http://localhost:3000/api/index/banner", 
6.                     success: function (response) { 
7.                         resolve(response); 
8.                     }, 
9.                     error: function (err) { 
10.                         reject(err); 
11.                     } 
12.                 }); 
13.             }); 
14.             return p; 
15.         } 
16.  
17.         async function getData(){ 
18.             let data=await getBanner(); 
19.             console.log(data); 
20.         } 

这样的代码相比于上面的代码要简化很多，但是也有弊端，由于await只能接收promise的成功结果，也就是说，若上面代码出现了异常，则代码会中断执行。作为一个优秀的开发人员肯定不希望代码崩掉，那么该如何解决异常呢，有两种方案：一是采用try..catch来捕获异常，另外是使用catch

1. async function getData() { 
2.             try { 
3.                 let data = await getBanner(); 
4.                 console.log(data); 
5.             } catch (e) { 
6.                 console.log(e); 
7.             } 
8.         } 
9.  
10.         //或者 
11.         async function getData() { 
12.             let data = await getBanner().catch(e => { 
13.                 console.log(e); 
14.             }) 
15.             console.log(data); 
16.         } 

但这两种方案都又会出现嵌套，特别是若发起一些负责的请求(例如上面回调地狱的情况)，则代码依然非常复杂，那么有没有更好的解决方案呢。答案是有。在项目开发过程中，我们经常使用await-to-js的技术来解决这个问题：

1. function to(p) { 
2.            return p 
3.                .then(data => [null, data]) 
4.                .catch(err => [err, null]); 
5.        } 

其实这个方案依然是利用promise的链式调用原理来解决的。那么使用，最后代码为：

1. function to(p) { 
2.            return p 
3.                .then(data => [null, data]) 
4.                .catch(err => [err, null]); 
5.        } 
6.  
7.        async function getData() { 
8.            let [err, data] = await to(getBanner()) 
9.        } 

利用这个方案，大家发现，代码量不仅大大的减少，而且兼容性更加友好。