ES6---Promise对象

最新推荐文章于 2024-09-21 10:42:59 发布

南初️

最新推荐文章于 2024-09-21 10:42:59 发布

阅读量758

点赞数 5

分类专栏： ES6 文章标签： javascript 前端开发语言 es6

本文链接：https://blog.csdn.net/qq_45806781/article/details/122461254

版权

ES6 专栏收录该内容

27 篇文章 7 订阅

订阅专栏

ES6---Promise对象

一、Promise 的含义
Promise对象两个特点

二、Promise 基本用法
三、用Promise对象实现的 Ajax 操作
四、Promise异步加载图片
五、Promise.prototype.then()---添加状态改变时的回调函数
六、Promise.prototype.catch()---指定发生错误时的回调函数
七、Promise.prototype.finally()
八、Promise.all()---合并多个 Promise 实例
九、Promise.race()---合并多个 Promise 实例
十、Promise.resolve()---将现有对象转为 Promise 对象
Promise.resolve()方法的参数四种情况
1. 参数是一个 Promise 实例
2. 参数是一个thenable对象
3. 参数不是具有then()方法的对象，或根本就不是对象
4. 不带有任何参数

十一、Promise.reject()
十二、Generator 函数与 Promise 的结合

一、Promise 的含义

Promise 是异步编程的一种解决方案。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise对象两个特点

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

二、Promise 基本用法

Promise对象是一个构造函数，用来生成Promise实例。
Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。
resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。
    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)=>{
        //失败的回调函数reject
        console.log(error);
    })
或者
    let promise=new Promise((resolve,reject)=>{
        let status=true;
        if(status){
            resolve('成功');
        }
        else{
            reject(new Error("失败"));
        }
    });
    promise.then((res)=>{
        //resolve
        console.log(res);
    }).catch((err)=>{
        //reject
        console.log(err);
    }).finally(()=>{
        console.log("最终执行的代码");
    })
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。

三、用Promise对象实现的 Ajax 操作

     function Ajax(method,url,data,callback){
        var http;
        if(window.XMLHttpRequest){
            http=new XMLHttpRequest();
        }
        else{
            http=new ActiveXObject("Microsoft.XMLHTTP");
        }
        if(method=="get"){
            if(data){
                url+="?";
                url+=data;
            }
            http.open(method,url);
            http.send();
        }
        else{
            http.open(method,url);
            if(data){
                http.send(data);
            }
            http.send();
        }
        http.onreadystatechange=function(){
            if(http.readyState==4&&http.status==200){
                callback(http.response);
            }
        }
    }
    let promise=new Promise((resolve,reject)=>{
        try{
            Ajax('get','./city.json',null,(res)=>{
                resolve(res);
            })
        }catch(e){
            reject(e);
        }
    });
    promise.then((res)=>{
        //resolve
        console.log(res);
    }).catch((err)=>{
        //reject
        console.log(err);
    }).finally(()=>{
        console.log("最终执行的代码");
    });

在这里插入图片描述

四、Promise异步加载图片

    let promise=function (src){
        return new Promise(function (resolve,reject){
            let image=new Image();
            image.onload=function (){
                resolve(image);
            };
            image.onerror=function (){
                reject(new Error("图片加载失败！"));
            };
            image.src=src;
        });
    };
    let src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210611094Q512b-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1644675006&t=144fbdde7f20cda32982c51b59ef3c28';
    promise(src).then(function (img){
        document.body.appendChild(img);
    }).catch(function (error){
        console.log(error);
    });

五、Promise.prototype.then()—添加状态改变时的回调函数

Promise 实例具有then方法，也就是说，then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，它们都是可选的。
then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
    let promise=new Promise(function (resolve,reject){
        let data={
            json:function (){
                return {id:1};
            }
        }
        if(data){
            resolve(data);
        }
        else{
            reject(new Error("出错了"));
        }
    });
    promise.then(function (res){
        return res.json();
    }).then(function (res){
        console.log(res);//{id: 1}
    });
采用链式的then，可以指定一组按照次序调用的回调函数。这时，前一个回调函数，有可能返回的还是一个Promise对象（即有异步操作），这时后一个回调函数，就会等待该Promise对象的状态发生变化，才会被调用。

六、Promise.prototype.catch()—指定发生错误时的回调函数

Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数。
方法返回一个 Promise 对象，如果该对象状态变为resolved，则会调用then()方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。
reject()方法的作用，等同于抛出错误。
如果 Promise 状态已经变成resolved，再抛出错误是无效的。因为 Promise 的状态一旦改变，就永久保持该状态，不会再变了。
Promise 对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

七、Promise.prototype.finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。
不管promise最后的状态，在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。
finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

八、Promise.all()—合并多个 Promise 实例

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
    let p1=new Promise(function (resolve,reject){
        resolve(1);
    });
    let p2=new Promise(function (resolve,reject){
        resolve(2);
    });
    let p=Promise.all([p1,p2]);
    p.then(function (result){
        console.log(result);//[1,2]
    });
Promise.all()方法接受一个数组作为参数，p1、p2都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。
p的状态由p1、p2决定，分成两种情况。
（1）只有p1、p2的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。
    let p1=new Promise(function (resolve,reject){
        resolve(1);
    });
    let p2=new Promise(function (resolve,reject){
        reject(new Error("错误！"));
    });
    let p=Promise.all([p1,p2]);
    p.then(function (result){
        console.log(result);
    }).catch(function (err){
        console.log(err);
    });

九、Promise.race()—合并多个 Promise 实例

Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
    let p1=new Promise(function (resolve,reject){
        //模拟请求，5000s请求回来的数据
        setTimeout(function (){
            resolve("数据");
        },5000);
    });
    let p2=new Promise(function (resolve,reject){
        //2s之后按超时处理
        setTimeout(function (){
            reject(new Error("超时"));
        },2000);
    });
    let p=Promise.race([p1.p2]);
    p.then(function (res){
        console.log(res);
    }).catch(function (err){
        console.log(err);
    });
只要有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
Promise.race()方法的参数与Promise.all()方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve()方法，将参数转为 Promise 实例，再进一步处理。

十、Promise.resolve()—将现有对象转为 Promise 对象

有时需要将现有对象转为 Promise 对象，Promise.resolve()方法就起到这个作用。
    Promise.resolve(12);
    //等价
    new Promise(resolve=>resolve(12));
    //等价
    new Promise(function (resolve){
        resolve(12);
    });
Promise.resolve()方法的参数四种情况

1. 参数是一个 Promise 实例

如果参数是 Promise 实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

2. 参数是一个thenable对象

thenable对象指的是具有then方法的对象，
Promise.resolve()方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法。
    let obj={
        then:function (resolve){
            resolve(22);
        }
    };
    let p=Promise.resolve(obj);
    p.then(function (res){
        console.log(res);//22
    });
thenable对象的then()方法执行后，对象p的状态就变为resolved，从而立即执行最后那个then()方法指定的回调函数，输出22。

3. 参数不是具有then()方法的对象，或根本就不是对象

如果参数是一个原始值，或者是一个不具有then()方法的对象，则Promise.resolve()方法返回一个新的 Promise 对象，状态为resolved。
    let obj={id:1};
    let p=Promise.resolve(obj);
    p.then(function (res){
        console.log(res);//{id: 1}
    });
4. 不带有任何参数

Promise.resolve()方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。
所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve()方法。

十一、Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

    Promise.reject(new Error("失败"));
    //等价
    Promise.reject(reject=>reject(new Error("失败")));
    //等价
    Promise.reject(function (reject){
        reject(new Error("失败"))
    });

十二、Generator 函数与 Promise 的结合

    let p=function (){
        return new Promise(function (resolve){
            setTimeout(function (){
                resolve("数据");
            },3000);
        });
    }
    let gen=function *(){
        try{
            let res=yield p();
            console.log(res);//数据
        }catch(e){
            throw e.message
        }
    }
    function run(Generator){
        let it=Generator();//返回遍历器
        function go(result){
            if(result.done)
                return result.value;
            return result.value.then(function (res){
                return go(it.next(res));
            }).catch(function (err){
                it.throw(err);
            });
        }
        go(it.next());
    }
    run(gen);