温故知新（七零）Promise 有没有解决异步的问题

Promise 有没有解决异步问题

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一的接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来，就像在写同步操作的流程，而不必一层一层的嵌套回调函数。

Promise 解决了 callback 回调地狱的问题，async await 是异步操作的终极解决方案。

来看一下 JavaScript 中异步方案

1.回调函数（callback）

setTimeout(()=>{
    //callback 函数体
},1000)

缺点：回调地狱，不能用 try catch捕获错误，不能 return

回调地狱的根本问题在于：

缺乏顺序性：回调地狱导致调试困难，和大脑的思维方式不同。

嵌套函数存在耦合性，一旦有所改动，就会牵一发而动全身。

嵌套函数过多的话，很难梳理错误。

ajax('xxx1',()=>{
    //callback
    ajax('xxx2',()=>{
        //callback2
        ajax('xxx3',()=>{
            //callback3
        })
    })
})

优点：解决了同步问题（只要有一个任务耗时很长，后面的任务就必须排队等着，会拖延整个程序的执行。）

2.Promise

Promise 就是为了解决 callback 问题而产生的。Promise 实现了链式调用，也就是说每次 then 后面返回的都是一个全新的 Promise，如果我们在 then 中 return ，return 的结果会被 Promise.resolve 包装

优点：解决了毁掉地狱的问题

ajax('xxx1')
.then(res=>{
    //操作逻辑
    return ajax('xxx2');
}).then(res=>{
    //操作逻辑
    return ajax('xxx3');
}).then(res=>{
    //操作逻辑
})

缺点：无法取消 Promise ，错误需要通过回调函数来捕获

3.Generator

特点：可以控制函数的执行，可以配合 co 函数库使用

function *fetch(){
    yield ajax('xxx1',()=>{});
    yield ajax('xxx2',()=>{});
    yield ajax('xxx3',()=>{});
}
let it = fetch();
let res1 = it.next();
let res2 = it.next();
let res3 = it.next();

4.async / await

async，await 是异步的终极解决方案

优点：代码清晰，不用像 Promise 写一大堆的 then 链，处理了回调地狱的问题

缺点：await 将异步代码改造为同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

async function fn(){
    //以下代码没有依耐性的话，完全可以使用 Promise.all 的方式
    //如果有依赖性的话，其实就是解决了回调地狱的例子了
    await fetch('xxx1');
    await fetch('xxx2');
    await fetch('xxx3');
}