Promise之详细讲解及用法 附有源码!!!-前端-阿习进阶博客
Java
MySQL
大数据
Python
前端
黑科技
    首页 >> 互联网 >> 前端

Promise之详细讲解及用法 附有源码!!!

[导读]:Promise作为典型的微任务之一,它的出现可以使JS达到异步执行的效果。一个Promise函数的结构如下列代码如下:constpromise=newPromise((resolve,reject)=>{resolve('a');});promise.then((arg)=>{consol...

Promise作为典型的微任务之一,它的出现可以使JS达到异步执行的效果。一个Promise函数的结构如下列代码如下:

官网形式:

const promise = new Promise((resolve, reject) => {
 resolve('a');
});
promise
    .then((arg) => { console.log(`执行resolve,参数是${arg}`) })
    .catch((arg) => { console.log(`执行reject,参数是${arg}`) })
    .finally(() => { console.log('结束promise') });

链式实现:

// 在上面代码中 是实现了new出一个对象 定义了个常量来接收了 不用常量接收直接使用时
 
const num = 2;
 
new Promise((r,e) => {  // r(resolve)  e(reject)
    // 异步逻辑代码
    num === 1 ? r(num) : e(num) // 同一个逻辑中只能执行一种状态方式
}).then(res => {
    console.log(`num为1时被调用,num为:${res}`)
}).catch(err => {
    console.log(`num为2时被调用,num为:${err}`)
})

个人Demo:

 saveBusinessInfo() {
        ****.get({
          url: '****',
          data: {
            ****: this.****
          },
          success: res => {
            this.showSyncInfo1 = false
            this.showSyncInfo2 = true
            new Promise((resolve, reject) => {
              res.data.endFlag == false ? resolve(res.data.endFlag) : reject(res.data)
            }).then(res1 => {
              this.saveBusinessInfo()
            }).catch(err => {
              this.showSyncInfo3 = true
              this.showSyncInfo2 = false
              this.showSyncInfo1 = false
              this.failCount = res.data.failCount
              this.successCount = res.data.successCount
              this.businessFile = res.data.file
              this.businessFileSlice = res.data.file.slice(31)
            })
          }
        })
      },

如果,我们需要嵌套执行异步代码,相比于回调函数来说,Promise的执行方式如下列代码所示:

const promise = new Promise((resolve, reject) => {
 resolve(1);
});
promise.then((value) => {
     console.log(value);
     return value * 2;
    }).then((value) => {
     console.log(value);
     return value * 2;
    }).then((value) => {
    console.log(value);
    }).catch((err) => {
  console.log(err);
    });

即,通过then来实现多级嵌套(链式调用),这看起来是不是就比回调函数舒服多了~

每个Promise都会经历的生命周期是:

    进行中(pending) - 此时代码执行尚未结束,所以也叫未处理的(unsettled)

    已处理(settled) - 异步代码已执行结束 已处理的代码会进入两种状态中的一种:

    已完成(fulfilled) - 表明异步代码执行成功,由resolve()触发

    已拒绝(rejected)- 遇到错误,异步代码执行失败 ,由reject()触发

因此,pending,fulfilled, rejected就是Promise中的三种状态啦~ 大家一定要牢记,在Promise中,要么包含resolve()来表示Promise的状态为fulfilled,要么包含reject()来表示Promise的状态为rejected。不然我们的Promise就会一直处于pending的状态,直至程序崩溃...

除此之外,Promise不仅很好的解决了链式调用的问题,它还有很多神奇的操作呢:

    Promise.all(promises):接收一个包含多个Promise对象的数组,等待所有都完成时,返回存放它们结果的数组。如果任一被拒绝,则立即抛出错误,其他已完成的结果会被忽略

    Promise.allSettled(promises): 接收一个包含多个Promise对象的数组,等待所有都已完成或者已拒绝时,返回存放它们结果对象的数组。每个结果对象的结构为{status:'fulfilled' // 或 'rejected', value // 或reason}

    Promise.race(promises): 接收一个包含多个Promise对象的数组,等待第一个有结果(完成/拒绝)的Promise,并把其result/error作为结果返回

function getPromises(){
    return [
        new Promise(((resolve, reject) => setTimeout(() => resolve(1), 1000))),
        new Promise(((resolve, reject) => setTimeout(() => reject(new Error('2')), 2000))),
        new Promise(((resolve, reject) => setTimeout(() => resolve(3), 3000))),
    ];
}
Promise.all(getPromises()).then(console.log);
Promise.allSettled(getPromises()).then(console.log);
Promise.race(getPromises()).then(console.log);  //1

打印结果如下:

image.png


本文来自阿习进阶博客,如若转载,请注明出处:http://yanxias.com

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

联系人:阿习

手机号:156****7890

留言内容:欢迎大家一起讨论文章,有喜欢发帖的可以私聊我给你开权限,发文章

留言时间:2022-05-09 17:46:15

回复内容:互联网阿习

回复时间:2022-05-09 17:46:15

用户IP:220.***.***.232

用户操作系统:Windows 10

欢迎加Easy的QQ