Promise

Promise

2023年4月7日

21:31

概念：

Promise 是一个对象，对象里存储一个状态，这个状态是可以随着内部的执行转化的。简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。promise 有三种状态：等待中(Pending)、已完成(Fulfilled)、已失败(Rejected)

原理：

promise 内部有三个状态，分别是pending，fulfilled和rejected

pending是对象创建后的初始状态，当调用resolve函数时变为fulfilled（成功）状态（可调用.then方法进行成功处理），当调用reject函数时变为rejected （失败）状态（可调用.catch方法进行失败处理）

异步编程和Promise的关系：

Promise是异步编程的解决方案之一(异步编程中数据传递或回调嵌套的问题)，Promise实际上是一个许诺器，它里面通常放的是将来要执行的异步代码，这些代码执行完成后会有两种结果：成功或失败，因此Promise有三种状态：pending(初始状态)、success/fullfill(成功状态)、reject(失败状态)，当我们在Promise内部调用了成功时的回调方法resolve()时则把Promise的pending(初始状态)转换成success/fullfill(成功状态)，当我们在Promise内部调用了失败时的回调方法reject()时则把Promise的pending(初始状态)转换成reject(失败状态)。

Promise用法：

Promise是一个构造函数，他本身有 all, reject, resolve 方法，在他的原型上有 then, catch方法．

1）then()

        then 方法就是把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。而 Promise 的优势就在于这个链式调用。我们可以在 then 方法中继续写 Promise 对象并返回，然后继续调用 then 来进行回调操作。可有两个参数，第一个是成功 resolve 调用的方法，第二个是失败 reject 调用的方法

         then方法注册 当resolve(成功)/reject(失败)的回调函数

promise.then(response=>{

console.log(response)

})

2）catch()

          它可以和 then 的第二个参数一样，用来指定 reject 的回调。它的另一个作用是，当执行 resolve 的回调（也就是上面 then 中的第一个参数）时，如果抛出异常了（代码出错了），那么也不会报错卡死 js，而是会进到这个 catch 方法中。

promise.catch(error=>{

console.log(error)

});

3）all()

  Promise 的 all 方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。

   只有全部为resolve才会调用 通常会用来处理 多个并行异步操作

Async/await作用和用法：

async作为一个关键字放在函数前面，表示该函数是一个异步函数，异步函数意味着该函数的执行不会阻塞后面代码的执行；

await 用于等待一个异步方法执行完成；

async/await的作用就是使异步操作以同步的方式去执行

async是一个加在函数前的修饰符，被async定义的函数会默认返回一个Promise对象resolve的值。因此对async函数可以直接then，返回值就是then方法传入的函数。

// async基础语法

async function fun0(){

    console.log(1);

    return 1;

}

fun0().then(val=>{

    console.log(val) // 1,1

})

async function fun1(){

    console.log('Promise');

    return new Promise(function(resolve,reject){

        resolve('Promise')

    })

}

fun1().then(val => {

    console.log(val); // Promise Promise

})

await作用

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('setTimeout')

        },3000)

    })

    let c = await function(){

        return 'function'

    }()

    console.log(a,b,c)

}

fun(); // 3秒后输出： 1 "setTimeout" "function"

function log(time){

    setTimeout(function(){

        console.log(time);

        return 1;

    },time)

}

async function fun(){

    let a = await log(1000);

    let b = await log(3000);

    let c = log(2000);

    console.log(a);

    console.log(1)

}

fun();

// 立即输出 undefined 1

// 1秒后输出 1000

// 2秒后输出 2000

// 3秒后输出 3000

async/await 的正确用法

// 使用async/await获取成功的结果

// 定义一个异步函数，3秒后才能获取到值(类似操作数据库)

function getSomeThing(){

    return new Promise((resolve,reject)=>{

        setTimeout(()=>{

            resolve('获取成功')

        },3000)

    })

}

async function test(){

    let a = await getSomeThing();

    console.log(a)

}

test(); // 3秒后输出：获取成功

应用场景：

 let status = 1;

      let userLogin = (resolve, reject) => {

        setTimeout(() => {

          if (status == 1) {

            resolve({

              data: "登陆成功",

              msg: "xxxx",

              token: "xxsdasdfsa",

            });

          } else {

            reject("失败了");

          }

        }, 2000);

      };

      let getUserInfo = (resolve, reject) => {

        setTimeout(() => {

          if (status == 1) {

            resolve({

              data: "获取用户信息成功",

              msg: "cdcdcd",

              token: "sndishishdissdsmmsadf",

            });

          } else {

            reject("失败了");

          }

        }, 1000);

      };

      new Promise(userLogin)

        .then((res) => {

          console.log("用户登录成功");

          return new Promise(getUserInfo);

        })

        .then((res) => {

          console.log("获取用户信息成功");

          console.log(res);

        });