ES6 Promise对象详细说明

Promise对象

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

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

Promise对象有两个特点:（1）对象的状态不受外界影响。（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。

Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

1.基本用法

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

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

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve(将对象状态从"未完成"变为"成功")和reject(将对象状态从"未完成"变为"失败")。

注意

调用resolve或reject并不会终结 Promise 的参数函数的执行。

一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。

Promise.then( )

then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时(变为resolved)的回调函数。

注意:

then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

    let promise = new Promise((resolve,reject) => {
        resolve();
    });
    promise.then(() => {
        console.log("A");
    })

Promise.catch( )

用于指定发生错误时的回调函数。如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。

    const promise = new Promise((resolve,reject) => {
        throw new Error("test");
    });
    promise.catch((err) => {
        console.log(err);
    })
    // Error: test

一般来说，不要在then()方法里面定义 Reject 状态的回调函数（即then的第二个参数），总是使用catch方法。

Promise.finally( )

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

promise
    .then(result => {  })
    .catch(error => {  })
    .finally(() => {  });

finally方法的回调函数不接受任何参数,finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

Promise.all( )

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

接收的是一个数组，数组元素是promise,如果所有元素变为resolve状态,就变为resolve状态,如果有一个元素变为reject状态,就变为reject状态.

    function CreatPromise(msg){
        var p = new Promise((resolve,reject) => {
            if(Math.random() > 0.5 ){
                resolve(msg + "成功")
            }else{
                reject(msg + "失败")
            };
        });
        return p;
    };
    var p1 = CreatPromise("A");
    var p2 = CreatPromise("B");
    var p3 = CreatPromise("C");

    var p = Promise.all([p1,p2,p3]);
    p.then((data) =>{
        //data是p1 p2 p3 的成功消息组成的数组
        console.log(data);
    }).catch((err) =>{
        //err 是第一个失败的参数
        console.log(err);
    });

Promise.race()

只要元素之中有一个实例率先改变状态，p的状态就跟着改变。

function CreatPromise(msg){
        var p = new Promise((resolve,reject) => {
            if(Math.random() > 0.5 ){
                resolve(msg + "成功")
            }else{
                reject(msg + "失败")
            };
        });
        return p;
    };
    var p1 = CreatPromise("A");
    var p2 = CreatPromise("B");
    var p3 = CreatPromise("C");

var p = Promise.race([p1,p2,p3]);
    p.then((data) =>{
        //data是p1 p2 p3 的成功消息组成的数组
        console.log(data);
    }).catch((err) =>{
        //err 是第一个失败的参数
        console.log(err);
    });

一些操作实例

{
            var p1 = new Promise(function (resolve, reject) {
                $.ajax({
                    url: "./Data/Data.txt",
                    dataType: "json",
                    success(arr) {
                        resolve(arr);
                    },
                    error(err) {
                        reject(err);
                    }
                });
            });
            var p2 = new Promise(function (resolve, reject) {
                $.ajax({
                    url: "./Data/Json.txt",
                    dataType: "json",
                    success(arr) {
                        resolve(arr);
                    },
                    error(err) {
                        reject(err);
                    }
                });
            });
            Promise.all([
                p1, p2
            ]).then((arr) => {
                console.log(arr);   //arr 就是p1 p2成功返回的结果
                let [res1, res2] = arr;   //解构赋值  p1的结果赋值给res1  p2的结果赋值给res2
            }).catch((err) => {
                console.log(err);
            });
        }
        {   //上面结构的封装
            function CreatePromise(url) {
                return new Promise(function (resolve, reject) {
                    $.ajax({
                        url,
                        dataType: "json",
                        success(arr) {
                            resolve(arr);
                        },
                        error(err) {
                            reject(err);
                        }
                    });
                });
            };

            Promise.all([
            CreatePromise("./Data/Data.txt"),
            CreatePromise("./Data/Json.txt")
            ]).then((arr) => {
                console.log(arr);   //arr 就是p1 p2成功返回的结果
                let [res1, res2] = arr;   //解构赋值  p1的结果赋值给res1  p2的结果赋值给res2
            }).catch((err) => {
                console.log(err);
            });
        }
        {   //使用jQ已封装的Promise
            Promise.all([
            $.ajax({url:"./Data/Data.txt",dataType:"json"}),
            $.ajax({url:"./Data/Json.txt",dataType:"json"}),
            ]).then((arr) => {
                console.log(arr);   //arr 就是p1 p2成功返回的结果
                let [res1, res2] = arr;   //解构赋值  p1的结果赋值给res1  p2的结果赋值给res2
            }).catch((err) => {
                console.log(err);
            });
        }
        
        {
            // Promise实现异步
            Promise.all([
                ajax1,
                ajax2
            ]).then((arr) => {
                //然后对arr进行你想要的操作
            }).catch((err) =>{
                // 错误信息
            })
        }

本文章是参考https://es6.ruanyifeng.com/#docs/promise该网站整理出来的,如果想进一步学习,推荐大家去这里看哦.