Promise的用法，文章后有面试题

Promise

then方法：

指定用于得到promise成功的回调或失败的回调，并且将返回一个新的promise对象

• 成功的状态：执行then方法的第一个回调函数

• 失败的状态：执行then方法的第二个回调函数

<script>
        const p1 = new Promise((resolve,reject)=>{
            resolve('ok')
        })
        p1.then(value=>{
            //成功执行
            console.log(value);
        },reason=>{
            //失败执行
           console.log(reason);
        })
</script>

• then方法的返回的Promise实例化对象取决于回调函数中的内容

• 如果返回的是非promise对象，则得到的是一个成功的promise对象

• 如果返回的是promise对象，则这个promise对象的状态将直接影响then方法返回的那个promise的状态和结果

• 如果为抛出异常，则then方法返回的promise对象为失败的promise

<script>
      const p1 = new Promise((resolve, reject) => {
        resolve('ok')
        // reject("error");
      });
        const result =  p1.then(
        (value) => {
          return new Promise((resolve,reject)=>{
            resolve('success')
            //   console.log(value);
          })
        },
        (reason) => {
          console.log(reason);
        }
      );
      console.log(result); //结果为成功的promise对象结果值为success
    </script>

promise.all ()

用户判断多个promise的状态，需要传一个数组，当所有promise的状态都是成功的，promise.all返回的promise对象才是成功的，有一个为失败就为失败

  <script>
      const p1 = new Promise((resolve, reject) => {
        resolve('ok')
      });
      const p2 = new Promise((resolve, reject) => {
        resolve('ok')
      });
      const p3 = new Promise((resolve, reject) => {
        reject('error')
      });
      const result = Promise.all([p1,p2,p3])
      console.log(result); //失败的promise
      
    </script>

promise.allSettled()

用来确定一组promise异步操作是否都结束了(不管成功还是失败)，包含fulfilled和rejected两种情况

<script>
      function ajax(url){
        return new Promise((resolve,reject)=>{
            let xhr = new XMLHttpRequest()
            xhr.open('get',url,true)
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){  
                    if(xhr.status >= 200 &&xhr.status<300){
                        resolve(xhr.responseText)
                    }else{
                        reject(xhr.responseText)
                    }
                }
            }
        })
      }
    Promise.allSettled([
        ajax('http://127.0.0.1:8000/user'),
        ajax('http://127.0.0.1:8000/home')
      ]).then(value=>{
        console.log(value); 
      }).catch(reason=>{
        console.log(reason);
      })
    </script>

promise.any()

用来检验多个promise的状态，只要参数中有一个promise为成功的状态，则promise.any返回的就为成功的状态，若有多个成功的promise，则返回第一个成功的promise的结果

  <script>
      const p1 = new Promise((resolve, reject) => {
        resolve('ok')
      });
      const p2 = new Promise((resolve, reject) => {
        resolve('okk')
      });
      const p3 = new Promise((resolve, reject) => {
        reject('error')
      });
      const result = Promise.any([p1,p2,p3])
      console.log(result); //成功的promise 结果为ok
      
    </script>

promise.race()

判断多个promise实例化对象 哪个最先由pedding变为fulfilled或reject就以哪个对象的状态和结果为准

 <script>
        const p1 = new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve('ok')
            },1000)
      });
      const p2 = new Promise((resolve, reject) => {
        setTimeout(()=>{
                resolve('ok')
            },1000)
      });
      const p3 = new Promise((resolve, reject) => {
        reject('error')
      });
      const result = Promise.race([p1,p2,p3])
      console.log(result); //p3的结果
    </script>

promise.reject()

返回一个失败的promise对象，结果值为参数值

<script>
      const p1 = Promise.reject(
        new Promise((resolve, reject) => {
          resolve("ok");
        })
      );
      console.log(p1);//失败的promise
    </script>

promise.resolve()

• 将一个普通的值转化成promise类型的数据

• 当resolve方法参数为非promise对象，会返回一个成功的promise对象

• 当resolve方法参数为promise对象，则这个promise对象的状态和结果将直接影响到返回的promise对象的状态和结果

catch方法

• catch方法回调函数中没有返回值，则返回一个成功的promise对象，结果值为undefined

• catch方法回调函数中有返回值但不是promise对象，则返回一个成功的promise对象，结果值为返回值

• catch方法回调函数中有返回值且为promise对象，则返回值的对象直接影响catch方法返回的promise对象

 <script>
      const p1 = new Promise((resolve,reject)=>{
        reject('error')
      })
     const result = p1.catch(value=>{
        console.log(11);
      })
       //异常穿透
      p1.then(value=>{
        return value
      }).then(value=>{
        return value
      }).catch(reason=>{
        console.log(reason);
      })
      console.log(result);
​
    </script>

promise.finally()

不管promise对象的状态是成功还是失败，都会执行finally，finally没有参数

<script>
      const p1 = new Promise((resolve,reject)=>{
        reject('error')
      })
    p1.then(value=>{
      console.log(value);
​
    }).catch(reason=>{
      console.log(reason);
​
    }).finally(()=>{
      console.log(111); //都会执行finalyy
    })
​
    </script>

终止promise链条

返回一个为pending状态的promise对象

 <script>
      const p1 = new Promise((resolve,reject)=>{
        resolve('ok')
      })
    p1.then(value=>{
      console.log(value);
    }).then(value=>{
      console.log(111);
    }).then(value=>{
      console.log(222); 
      return new Promise(()=>{})  //终止 下面的then方法和catch方法要根据这个then方法的成功和失败进行执行，但是为pending状态  所以后面不再执行
    }).then(value=>{
      console.log(333);
    }).catch(reason=>{
      console.log(reason);
    })
    </script>

---

async函数

任何函数都可以声明成一个async函数，因为要实现异步的功能，可能要将实现的功能封装到一个函数之中，为了更好的表示函数之中是异步，所以在函数前面加一个async

函数内部可以添加任意语句来执行，但是其真正的目的是为了得到一个promise对象的状态及结果值

<script>
      async function main(){
        //情况1 返回一个非promise对象 函数调用的结果是一个成功的promise对象且值为返回值
        // return 100
​
        //情况2 返回一个promise对象 函数调用的结果的promise对象的状态和值与这个挂钩
        return new Promise((resolve,reject)=>{
          resolve('ok')
        })
​
        //情况3  抛异常
        throw new Error('faile')
      }
      let result = main()
      console.log(result);
    </script><script>
      async function main(){
        //情况1 返回一个非promise对象 函数调用的结果是一个成功的promise对象且值为返回值
        // return 100
​
        //情况2 返回一个promise对象 函数调用的结果的promise对象的状态和值与这个挂钩
        return new Promise((resolve,reject)=>{
          resolve('ok')
        })
​
        //情况3  抛异常
        throw new Error('faile')
      }
      let result = main()
      console.log(result);
    </script>

await函数

• async函数中不一定结合await

• await必须写在async函数中

• await相当于then，可以拿到promise对象成功的值

• await后面为非promise对象，后面是什么返回什么

• await后面是promise对象，且状态为成功，则返回成功的结果值，不会返回失败的结果值，需要失败的结果值要需要try-catch

同步代码和异步代码同时出现，先执行同步，在执行异步

<script>
    //三个都为同步 ，函数里有异步任务
      async function main() {
        console.log(1111);
        let result = await Promise.resolve("ok");
        console.log(result);
        console.log(222);
        let result1 = await Promise.resolve("okkk");
        console.log(result1);
      }
​
      async function demo() {
        console.log(555);
        console.log(666);
        let result = await Promise.resolve("success");
        console.log(result);
      }
      console.log(777);
      main(); //7   1  5  6  ok  2 success ok1
      demo();
    </script>

宏任务和微任务

宏队列：用来保存执行的宏任务(回调)，比如：定时器，dom事件，ajax

微队列：用来保存执行的微任务(回调)，比如：promise，multation

JS执行的时候会区分两个队列

• 首先js会必须把所有同步任务执行完

• 每次准备取出第一个宏任务的执行之前，都需要把所有的微任务一个一个取出来执行

• 顺序：同--微---宏

<script>
      setTimeout(()=>{
        console.log(11);
      },1000)   //异步宏任务
      new Promise((resolve,reject)=>{
        resolve('ok')
        console.log(33);  //同步任务
      }).then(value=>{
        console.log(value); //异步promise 微任务
      })
      console.log(222); //同步任务   3  2  ok  1
    </script>

面试题

   setTimeout(()=>{
        console.log(11);
      },0)   //异步宏任务
      new Promise((resolve,reject)=>{
        console.log(33);
        resolve('ok')
          //同步任务
      }).then(value=>{
        console.log(44); //异步promise 微任务
      })
      console.log(222); //同步任务   3  2  4  1

<script>
        const first = () =>(new Promise((resolve,reject)=>{
          console.log(3);//同
          let p = new Promise((resolve,reject)=>{
            console.log(7); //同
            setTimeout(()=>{  
              console.log(5);  //宏
              resolve(6)
            },0)
            resolve(1)
          })
          resolve(2)
          p.then(value=>{  //微
            console.log(value);
          })
        }))
        first().then(value=>{ // 微
          console.log(value);
        })
        console.log(4); //同
      //3  7  4  1  2  5
    </script>

 <script>
      setTimeout(()=>{
        console.log(0);  //宏
      },0)
      new Promise((resolve,reject)=>{
        console.log(1);  //同
        resolve()
      }).then(()=>{  //微
        console.log(2);
        new Promise((resolve,reject)=>{
          console.log(3); //微里面的同
          resolve()
        }).then(()=>{
          console.log(4);
        }).then(()=>{
          console.log(5);
        })
      }).then(()=>{  //微
        console.log(6);
      })
​
      new Promise((resolve,reject)=>{
        console.log(7);//同
        resolve()
      }).then(()=>{  //微
        console.log(8);
      })
      //1 7 2 3  8   4  6  5 0
    </script>