ES6——Promise函数

本文详细介绍了Promise的三个状态及其转换规则,包括pending、fulfilled和rejected。接着展示了Promise的基本用法,如构造函数中的resolve和reject函数,以及通过Promise实现的Ajax请求、图片懒加载。然后,文章深入讲解了then方法、Promise.all()、Promise.race()、Promise.resolve()和Promise.reject()的用法。最后,讨论了如何将Generator函数与Promise结合,以优雅地管理异步流程。
摘要由CSDN通过智能技术生成


异步编程解决方案

一、三个状态

1.promise内部状态 不受外界影响,由异步编程结果决定

pending进行中
fulfilled成功
rejected失败

2.promise中的状态 一旦发生变化不会再修改

Promise对象的状态改变,只有两种可能:
从pending变为fulfilled 和 从pending变为rejected

二、基本用法

ES6 规定,Promise对象是一个构造函数,用来生成Promise实例

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject,它们是两个函数

resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去

1.举例

    let promise=new Promise((resolve,reject)=>{
   
        let status=true;
        if(status){
   
            resolve('成功');
        }
        else{
   
            reject(new Error('失败'));
        }
    })

    //promise对象的使用
    //写法一
    promise.then((res)=>{
   
        //成功回调函数 resolve
        console.log(res);
    },(error)=>{
   
        console.log(error);
    })
    //输出:   成功

	//写法二
	    promise.then((res)=>{
   
        //resolve
        console.log(res);
    }).catch(()=>{
   
        //reject
        console.log(error);
    }).finally(()=>{
   
        console.log("最终执行的代码");
    });
    //输出:  成功 最终执行的代码
  • 一个promise使用另一个promise,状态是由被使用的promise决定
    let p1=new Promise((resolve,reject)=>{
   
        setTimeout(function () {
   
            resolve("123");
        },2000)
    });
    let p2=new Promise((resolve,reject)=>{
   
        setTimeout(function () {
   
            resolve(p1);
        },1000)
    });
    p2.then((res)=>{
   
        console.log(res); //123 (2s后输出)
    })



    let p1=new Promise((resolve,reject)=>{
   
        setTimeout(function () {
   
            reject(new Error("失败"));
        },2000)
    });
    let p2=new Promise((resolve,reject)=>{
   
        setTimeout(function () {
   
            resolve(p1);
        },1000)
    });
    p2.then((res)=>{
   
        console.log(res);
    }).catch((err)=>{
   
        console.log(err); //Error: 失败 (2s后输出)
    })

2.使用原

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

致可乐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值