Promise的理解和使用

一、Promise 是什么？

1.理解

• Promise是一门新的技术（ES6规范）
• Promise是JS中进行异步编程的新解决方案。（旧方案是使用回调函数）
• Promise是一个构造函数
• Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

常用的异步编程有 fs文件操作、数据库操作、AJAX、定时器等 

2.好处

支持链式调用，可以解决回调地狱问题

1.回调地狱

回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件 

setTimeout(()=>{
  console.log("等三秒后");
    setTimeout(() => {
       console.log("再等三秒");
        setTimeout(() => {
          console.log("又三秒后");
         }, 3000);
     }, 3000);
},3000)

2.链式调用

fetch("https://...")
 .then((response)=>response.json())
 .then((json)=>console.log(json));

二、Promise的使用 

1.构造Promise

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

Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject。 

• resolve 和 reject 都是函数
• 调用 resolve 代表一切正常
• 调用reject 代表出现异常 

 2.Promise的三个状态

总结：最初创建对象的状态是pending，当调用了 resolve方法时就会进入 fulfilled 状态，当调用reject方法 ，就会进入 rejected 状态。当状态一旦发送改变，就不会重新改变，例如已经从pending到 fulfilled 了就不会重新改变到rejected。

示例代码： 

let num = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(1);
        reject(2);
    }, 2000);
});
console.log(num);

 

 3.Promise工作流程

4.Promise方法

3.1 .then()

用于得到成功value的成功回调和用于得到失败reason的失败回调，返回一个新的promise对象 

.then(onResolved,onRejected) =>{} 

• onResolved 函数：成功的回调函数 (value)=>{}
• onRejected 函数：失败的回调函数 (reason)=>{}

new Promise((resolve,reject)=>{
      resolve(123)
})
.then( (res)=>{ console.log(res+'成功') },(err)=>{ console.log(err+'失败') })

3.2 .catch() 

当接收处理的 rejected状态时，.catch()用于解决会报出Uncaught (in promise) 的问题

.catch(onRejected) =>{}  

 new Promise((resolve, reject) => {
        reject(123);
 }) .then((res) => console.log(res + "成功"))
    .catch((res) => console.log(res + "失败"));

3.3 .finally() 

new Promise((resolve,reject)=>{
            resolve('123')
}).then(res=>console.log(res+'成功就会执行'))
  .catch(err=>{console.log(err+'失败就会执行')})
  .finally(()=>{console.log('不管成功还是失败都会执行');})