Promise及其应用

一.什么是promise

Promise是异步编程的一种解决方案，原型有.the()、.catch()等方法，改善了传统回调造成的代码难维护，控制反转等问题。

promise的状态

promise有三种状态：分别是pending、fullfilled、rejected，

1.pending
初始状态（可以改变），在resolve和reject之前，都是处于这个状态
resolve -> fulfilled
reject -> rejected
2.fulfilled
最终态，不可改变
一个promise 被resolve之后变成这个状态
必须拥有一个value值
3.rejected
最终态，不可改变
一个promise 被reject之后变成这个状态
必须拥有一个reason值

二.promise的作用与用法

作用：Promise对象可以理解为一次执行的异步操作，使用promise对象之后可以使用一种链式调用的方式来组织代码；让代码更加的直观。也就是说，有了Promise对象，就可以将异步操作以同步的操作的流程表达出来，避免了层层嵌套的回调函数。总结一下就是可以将原先不可控的回调通过promise转为更加可控更清晰的方式表达，更加高效，更便于维护。

用法：首先我们new一个Promise,将Promise实例化。然后在实例化的promise可以传两个参数，一个是成功之后的resolve，一个是失败之后的reject。

const promise = new Promise(function (resolve, reject) {
	if (/*异步操作成功*/) {
		resolve(value);
	} else {
		reject(error);
	}
});

关于.then和.catch方法下面有具体的代码演示

.then方法

let p1 = new Promise((resolve, reject) => {
        setTime(() => {
          resolve("ok");
        }, 2000);
      });
      console.log("p1",p1);
      let p2 = p1.then((value)=>{
        console.log("p1",p1,value);
        return value.toUpperCase();
      })
      console.log("p2",p2);
      let p3 = p2.then((value)=>{
        console.log("p2",p2,value);
      })
      console.log("p3",p3);
//p1 Promise { <pending> }
//p2 Promise { <pending> }
//p3 Promise { <pending> }
//p1 Promise { 'ok' } ok
//p2 Promise { 'ok' } OK

.catch方法

      var p1 = new Promise((res, rej) => {
        setTimeout(() => {
          res("p1");
        }, 1000);
      });
 
      var p2 = new Promise((res, rej) => {
        setTimeout(() => {
          res("p2");
        }, 2000);
      });
 
      //   rej(new Error("p2 Error"));
 
      var p3 = new Promise((res, rej) => {
        setTimeout(() => {
          res("p3");
        }, 3000);
      });
 
      Promise.all([p3, p2, p1])
        .then((r) => {
          console.log(r);
        })
        .catch((err) => console.log(err.message));

三.async/await的作用与用法

3.1 关于async

async是"异步"的简写，可作用于异步声明的函数

 async function timeout() {
     return 'hello world!'
 }//声明该函数为异步

3.2关于await

只能放在async定义的函数内。可以理解为等待。

await 修饰的如果是Promise对象：可以获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；

如果不是Promise对象：把这个非promise的东西当做await表达式的结果。

async function fun(){
    let a = await 1;
    let b = await new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('P')
        },3000)
    })
    let c = await function(){
        return 'y'
    }()
    console.log(a,b,c)
}
fun(); // 3秒后输出： 1 "P" "y"