Promise和Async/Await用法整理

迈不过友情╰ 2021-06-26 16:06 514阅读 0赞

## 1.`Promise` ##

### 1.简介 ###

`Promise`,简单来说就是一个容器，里面保存着某个未来才会结束的时间(通常是一个异步操作的结果)  
`Promise`对象的基本语法：

new Promise((resolve,reject) => { 
        //.....
    });

从语法上来说，`Promise`是一个对象，从它可以获取异步操作的消息。

基本语法：

let p = new Promise((resolve,reject) => { 
        //...
        resolve('success')
    });
    
    p.then(result => { 
        console.log(result);//success
    });

`Promise`对象特点和三个状态：

![这里写图片描述][20190527210108886.jpg]例如：

运行结果：

after resolve
    success

`resolve`下面的语句其实是可以执行的，那么为什么`reject`的状态信息在下面没有接受到呢？这就是因为`Promise`对象的特点：状态的凝固。`new`出一个`Promise`对象时，这个对象的起始状态就是`Pending`状态，在根据`resolve`或`reject`返回`Fulfilled`状态/`Rejected`状态。

### 2. ###

![这里写图片描述][20190527210344231.jpg]

`Then`分别接受`resolve`和`reject`的信息，有三种参数形式，第三种比较“怪异”，只用来接收做`reject`处理。  
eg：

### 3.链式调用 ###

我们来执行一段代码：

let p = new Promise((resolve,reject) => { 
        reject('reject');
    });
    
    let resultP = p.then(null,result => { 
        console.log(result);
    });
    
    console.log(resultP);

结果：

Promise { <pending> }
    reject

`js`的执行顺序就是这样，同步->异步->回调，在同步执行的时候，`Promise`对象还处于`pending`的状态，也说明了这个`then`返回的是一个`Promise`对象。  
而且必须在`then`里面给一个返回值，才能继续调用，否则`undefined`。  
eg：

结果：

error
    123

### 4.`catch` ###

![这里写图片描述][20190527210715915.jpg]

eg:

let p = new Promise((resolve,reject) => { 
        reject('error');
    });
    
    p.catch(result => { 
        console.log(result);
    })

那这个`catch`的返回值是什么呢：  
和上面`then`是一样的。

### 5.`Promise.resolve()` ###

![这里写图片描述][20190527210856870.jpg]传一个普通的对象：

// let p1 =Promise.resolve(123);
    let p1 =Promise.resolve({ name:'xixi',age:'xxxx'});
    
    p1.then(result => { 
        console.log(result);
    });

如果是`Promise`对象呢，直接返回

结果：

true
    success

### 6.`Promise.reject()` ###

![这里写图片描述][20190527211314370.jpg]eg：

let p = Promise.reject(123);
    
    console.log(p);
    
    p.then(result => { 
        console.log(result);
    }).catch(result => { 
        console.log('catch',result);
    })

结果：

Promise { <rejected> 123 }
    catch 123

### 7.`Promise.all()` ###

![这里写图片描述][20190527211503946.jpg]  
eg：

let p1 = Promise.resolve(123);
    let p2 = Promise.resolve('hello');
    let p3 = Promise.resolve('success');
    
    
    Promise.all([p1,p2,p3]).then(result => { 
        console.log(result);
    })

结果：

[ 123, 'hello', 'success' ]

成功之后就是数组类型，当所有状态都是成功状态才返回数组，只要其中有一个的对象是`reject`的，就返回`reject`的状态值。  
eg：

结果：

error

又一个eg：

//用sleep来模仿浏览器的AJAX请求
    function sleep(wait) { 
        return new Promise((res,rej) => { 
            setTimeout(() => { 
                res(wait);
            },wait);
        });
    }
    
    let p1 = sleep(500);
    let p2 = sleep(500);
    let p3 = sleep(1000);
    
    Promise.all([p1,p2,p3]).then(result => { 
        console.log(result);
        //.....
        //loading
    });

### 8.`Promise.race` ###

![这里写图片描述][20190527211720903.jpg]和`all`同样接受多个对象，不同的是，`race()`接受的对象中，哪个对象返回的快就返回哪个对象，就如`race`直译的赛跑这样。如果对象其中有`reject`状态的，必须`catch`捕捉到，如果返回的够快，就返回这个状态。`race`最终返回的只有一个值。  
eg：

//用sleep来模仿浏览器的AJAX请求
    function sleep(wait) { 
        return new Promise((res,rej) => { 
            setTimeout(() => { 
                res(wait);
            },wait);
        });
    }
    
    let p1 = sleep(500);
    let p0 = sleep(2000);
    
    Promise.race([p1,p0]).then(result => { 
        console.log(result);
    });
    
    let p2 = new Promise((resolve,reject) => { 
        setTimeout(()=>{ 
            reject('error');
        },1000);
    });
    
    Promise.race([p0,p2]).then(result => { 
        console.log(result);
    }).catch(result => { 
        console.log(result);
    });

500
    error

### 9.异常处理 ###

![这里写图片描述][20190527212538783.jpg]  
为什么说安静，一个例子，`Pormise`内部的错误外界用`try-catch`捕捉不到  
eg：

try { 
        let p = new Promise((resolve, reject) => { 
            throw new Error("I'm error");
            // reject(new Error("I'm Error"));
        });
    }catch(e) { 
        console.log('catch',e);
    }

结果什么都没打印。  
但是抛出的错误可以通过`catch`来捕捉：

// try { 
        let p = new Promise((resolve, reject) => { 
            throw new Error("I'm error");
            // reject(new Error("I'm Error"));
        });
    // }catch(e) { 
    // console.log('catch',e);
    // }
    
    
    p.catch(result => { 
        console.log(result);
    });

这样就捕捉到错误。所以:

![这里写图片描述][20190527212747870.jpg]

## 2.`Async-Await` ##

### 1.简介： ###

![这里写图片描述][20190527212854375.jpg]  
![这里写图片描述][20190527212910486.jpg]  
`async`和`await`在干什么，`async`用于申明一个`function`是异步的，而`await`可以认为是`async wait`的简写，等待一个异步方法执行完成。

### 2.基本语法 ###

![这里写图片描述][20190527213021535.png]  
在`Chrome`里申明这样一个函数，可以在控制台看到返回的其实就是一个`Promise`对象。  
扩展需要了解的就是`Chrome`现在也支持`asyncFunction`,可以在`Chrome`控制台测试：

console.log(async function(){ }.constructor);
    ƒ AsyncFunction() {  [native code] }

### 3.规则 ###

![这里写图片描述][20190527213219587.jpg]如图，`await`放在普通函数里是会报错的。

![这里写图片描述][20190527213305194.jpg]

eg：

async function demo() { 
        let result = await Promise.resolve(123);
        console.log(result);
    }
    demo();

### 4.应用 ###

`Promise`虽然一方面解决了`callback`的回调地狱，但是相对的把回调“纵向发展”了，形成了一个回调链。eg：

控制台：

300

后面的结果都是依赖前面的结果。  
改成`async/await`写法就是：

async function demo() { 
        let result01 = await sleep(100);
        //上一个await执行之后才会执行下一句
        let result02 = await sleep(result01 + 100);
        let result03 = await sleep(result02 + 100);
        // console.log(result03);
        return result03;
    }
    
    demo().then(result => { 
        console.log(result);
    });

因为`async`返回的也是`promise`对象，所以用`then`接受就行了。  
结果：

300

需要注意的就是`await`是强制把异步变成了同步，这一句代码执行完，才会执行下一句。

### 5.错误处理 ###

![这里写图片描述][20190527213523940.jpg]  
如果是`reject`状态，可以用`try-catch`捕捉  
eg：

结果：

error

这是基本的错误处理，但是当内部出现一些错误时，和上面`Promise`有点类似，`demo（）`函数不会报错，还是需要`catch`回调捕捉。这就是内部的错误被“静默”处理了。

### 6.注意你的并行执行和循环 ###

比如上面的例子：

![这里写图片描述][20190527213700367.png]  
如果这三个是你想异步发出的`AJAX`请求，在这段代码里其实是同步的，第一个发出去才会发第二个，所以`async/await`需要谨慎使用。

![这里写图片描述][20190527213849276.jpg]  
现在有一些`forEach`或者`map`的循环里，比如在`forEach`里使用`await`，这时候的上下文就变成了`array`，而不是`async function`，就会报错。这时候你就要想到是什么错误。

[20190527210108886.jpg]: /images/20210626/15f655d255704953b62f2f16aa8e744b.png
[20190527210344231.jpg]: /images/20210626/f75d5e6fdf054b15a6b849511c5a7d4a.png
[20190527210715915.jpg]: /images/20210626/d4d9b9df4b9d420c9984183fc419fd6c.png
[20190527210856870.jpg]: /images/20210626/f1d856e636404cad9d53654f92f0ef16.png
[20190527211314370.jpg]: /images/20210626/d6e717aab8ee4ebf8d04601cefeafadf.png
[20190527211503946.jpg]: https://img-blog.csdnimg.cn/20190527211503946.jpg
[20190527211720903.jpg]: https://img-blog.csdnimg.cn/20190527211720903.jpg
[20190527212538783.jpg]: https://img-blog.csdnimg.cn/20190527212538783.jpg
[20190527212747870.jpg]: https://img-blog.csdnimg.cn/20190527212747870.jpg
[20190527212854375.jpg]: https://img-blog.csdnimg.cn/20190527212854375.jpg
[20190527212910486.jpg]: https://img-blog.csdnimg.cn/20190527212910486.jpg
[20190527213021535.png]: https://img-blog.csdnimg.cn/20190527213021535.png
[20190527213219587.jpg]: https://img-blog.csdnimg.cn/20190527213219587.jpg
[20190527213305194.jpg]: https://img-blog.csdnimg.cn/20190527213305194.jpg
[20190527213523940.jpg]: https://img-blog.csdnimg.cn/20190527213523940.jpg
[20190527213700367.png]: https://img-blog.csdnimg.cn/20190527213700367.png
[20190527213849276.jpg]: https://img-blog.csdnimg.cn/20190527213849276.jpg